1. CSS 性能优化 —— 林小志 linxz

3. div div div p.className a.className div div div p.pclass 0001 a.class 0001 { background: #CFD; } … div div div p.pclass 1000 a.class 1000 { background: #CFD; }

4. div div div p a.className div div div p a.class 0001 { background: #CFD; } … div div div p a.class 1000 { background: #CFD; }

5. div div div p * div div div p * { background: #CFD; }

6. div#outerdiv div div p.className a.className div#outerdiv div div p.pclass 0001 a.class 0001 { background: #CFD; } … div#outerdiv div div p.pclass 1000 a.class 1000 { background: #CFD; }

7. div#outerdiv div div p * div#outerdiv div div p * { background: #CFD; }

8. a a { background: #CFD; }

9. className .class 0001 { background: #CFD; } … .class 1000 { background: #CFD; }

10. 选择符的性能

11. 如何选择选择符？？

12. 浏览器的渲染和操作顺序

13. 浏览器的渲染和操作顺序

14. 浏览器的渲染和操作顺序

15. 浏览器的渲染和操作顺序

16. 页面加载、 reflow 过程示意

17. reflow 对于 DOM 结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算，并 根据计算结果将元素放到它该出现的位置 ，这个过程称之为 reflow

22. repaint 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后， 浏览器于是便把这些元素都按照各自的特性绘制了一遍 ，于是页面的内容出现了，这个过程称之为 repaint

24. selector reflow repaint .link1 { color:#0053aa; text-decoration:none;font-size:22px;display:block; height:26px; } .link1:hover { text-decoration:underline; color:red; height:36px; } div ul div span a { color:#0053aa; text-decoration:none;font-size:22px;display:block; height:26px; } div ul div span a:hover { text-decoration:underline; color:red; height:36px; }

25. div ul div span a

26. .link1

27. 如何选择才会有收获！？