读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符

css selectors 性能消耗从低到高:

  1. ID selectors
    #modal { overflow: hidden; }
  2. class selectors
    .container { margin: 0 atuo; }
  3. type selectors
    a { color: #999; }
  4. adjacent sibling selectors
    input + label { display: inline; }
  5. child selectors
    label > input { display: none; }
  6. descendant selectors
    .foo a { text-decoration: none; }
  7. universal selectors
    * { font-family: Arial; }
  8. Attribute Selectors
    [class^=”modal-“] { background: white; }
  9. Pseudo-Classes and Pseudo-Elements
    a:hover { text-decoration: none; }


CSS选择符是从右往左进行匹配的。
#modal a { color: black; }
遍历所有a,再遍历所有a的所有父节点,判断是否为#modal,是则进行,否则退出。

  1. 避免使用通配规则:推荐id、类和标签
  2. 不要限定id选择符:(×)div#foo (√)#foo
  3. 不要限定类选择符:(×)li.chapter (√).li-chapter
  4. 让规则越具体越好:(×)ol li a (√).list-anchor
  5. 避免使用后代选择符:开销高,能使用子代的情况下使用子代。
  6. 避免使用标签——子选择符:(×)#list > li > a (√).list-anchor
  7. 质疑子选择符的所有用途,尽量用类取代
  8. 依靠继承,避免重复指定规则

所以,
header h1 a.logo { color: white; }

.logo h1 a { color: white; }
的执行效率高出很多。


Reflow Time 回流时间
用户和网页交互时,浏览器应用样式和布局元素所花费的时间。
通俗说就是js改变页面class和样式渲染所花费的时间。
回流要重新应用css规则,意味着浏览器必须再次匹配所有的css selectors。