前端之家收集整理的这篇文章主要介绍了
css渲染性能总结及优化建议,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以让我们先讨论下CSS性能,这里有些我发现的东东:
类(class)选择器和ID选择器基本上是相同的速度
SASS/Compass的@extend格式仅稍稍落后于OOCSS格式
臃肿的格式在大数量级速度比其他格式明显要慢
即使是极端的情况,最好与最坏的时间差异也在100-200毫秒之间
还有浏览器性能要注意的(加分):
还有就是我自己测试后的个人结论:
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 中的选择器匹配快得多很多