返回 登录
0

复杂应用的 CSS 性能分析和优化建议

这是一篇较早的文章,但现在仍被微信圈里广泛传阅。说明其适用性和生命力还是很强,因此做以推荐。

本文是作者kangax对单页应用做性能优化的分析,分析为什么CSS中UI很好,但性能却很差?原因何在,通过使用Webkit和Opera的性能调试器工具进行分析对比,作者得出如下结论:

  • 减少选择器的数量 (包括这样的跟浏览器有关的: .ie7 .foo .bar)
  • 不要用通配符(包括想这样不规范的类型选择符[type=”url”])
  • 页面的缩放比例是会影响 CSS 性能的(比如: Opera)
  • 窗口大小也会影响 CSS 性能 (比如: Chrome)
  • 页面反复重新加载会降低 CSS 性能 (比如 Opera)
  • “border-radius” 和 “transform” 是性能最差的 CSS 属性(至少在WebKit & Opera 中是)
  • 基于WebKit 的浏览器中,Timeline 栏可以算出总的样式计算/reflow/repaint 时间
  • WebKit中的选择器匹配快得多很多

    中译文见:复杂应用的 CSS 性能分析和优化建议
    原文见:Profiling CSS for fun and profit. Optimization notes.

评论