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 中的选择器匹配快得多很多

相关文章

这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩展的时候不行...
在浏览器输入chrome://flags/回车,找到Omnibox UI Hide Steady-State URL Scheme and Trivial Subdoma...
方法一: 我们都知道Ubuntu有一个专门用来安装软件的工具apt,我们可以用它来全自动安装arm-linux-gcc。...
中文的windows下的cmd默认使用GBK的编码,敲代码时,页面使用的是UTF-8(65001),而powershell控制台默认...
提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin,但是make的时候,就是找不到 a...
我在Graph API开发中用的最多的测试工具就是Graph Explore,这个是微软开发的网页版的Graph API的测试工...