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

前端之家收集整理的这篇文章主要介绍了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 中的选择器匹配快得多很多

猜你在找的程序笔记相关文章