复杂应用的 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.