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。