狠狠撸

CSS 性能优化 —— 林小志 linxz

选择符的性能 <div id='outerdiv'> <div> <div><p class='pclass0001'><a id='id0001' class='class0001'>0001</a></p></div> ... <div><p class='pclass1000'><a id='id1000' class='class1000'>1000</a></p></div> </div> </div> 1000 次多层嵌套

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; }

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

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

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; }

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

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

浏览器的渲染和操作顺序

页面加载、 reflow 过程示意

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

页面加载、 reflow 过程示意 reflow_video_1.html ? reflow_video_2.html ?

触发 reflow 的原因改变窗囗大小改变文字大小添加 / 删除样式表内容的改变，如用户在输入框中敲字激活伪类，如 :hover (IE 里是一个兄弟结点的伪类被激活 ) 操作 class 属性脚本操作 DOM 计算 offsetWidth 和 offsetHeight 设置 style 属性 —— 来自于 Yahoo! 性能工程师 Nicole Sullivan 的总结

减少 reflow 的触发尽可能限制 reflow 的影响范围最好通过设置 style 的方式实现元素的动画， position 属性应当设为 fixed 或 absolute 权衡速度的平滑不要用 table 布局不要使用 IE 私有的 css expression —— Yahoo! 性能工程师 Nicole Sullivan 对减小 reflow 影响的建议

继续减少 reflow 的触发把 CSS 放在 <head></head> 区域内设定图片的尺寸大小不用 @import 方式引入 CSS

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

常见的触发 repaint 因素 visibility outline color …

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; }

如何选择才会有收获！？

狠狠撸

颁蝉蝉性能优化

More Related Content

颁蝉蝉性能优化

Editor's Notes