孟迎霞 CSDN

欢迎讨论、选题策划、公开课讲师、投稿

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/amone/article/details/80120528
想对作者说点什么? 我来说一句

Python性能分析优化.pdf

2017年09月21日 29.67MB 下载

cache性能分析优化实验报告

2012年07月02日 561KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭