css渲染性能总结及优化建议

性能

所以让我们先讨论下CSS性能，这里有些我发现的东东：

• 类(class)选择器和ID选择器基本上是相同的速度

• SASS/Compass的@extend格式仅稍稍落后于OOCSS格式

• 臃肿的格式在大数量级速度比其他格式明显要慢

• 即使是极端的情况，最好与最坏的时间差异也在100-200毫秒之间

还有浏览器性能要注意的（加分）：

• 大多数浏览器的表现大致相同，只是略快一些

• 火狐是测试的浏览器中最慢的

• Opera渲染快速的CSS最快，渲染慢速的CSS最慢

还有就是我自己测试后的个人结论：

• OOCSS和@extend格式相当快

• 肿胀的CSS有害性能

优化建议

• 减少选择器的数量 （包括这样的跟浏览器有关的: .ie7 .foo .bar）

• 不要用通配符（包括想这样不规范的类型选择符[type="url"]）

• 页面的缩放比例是会影响 CSS 性能的（比如： Opera）

• 窗口大小也会影响 CSS 性能 （比如： Chrome）

• 页面反复重新加载会降低 CSS 性能 （比如 Opera）

• “border-radius” 和 “transform” 是性能最差的 CSS 属性（至少在WebKit & Opera 中是）

• 基于 WebKit 的浏览器中，Timeline 栏可以算出总的样式 计算/reflow/repaint 时间

• WebKit 中的选择器匹配快得多很多

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!