CSS 优化、提高性能的方法有哪些?

关注者
657
被浏览
80,598

18 个回答

坚决反对说 CSS 优化空间小、对性能影响小的答案。事实上大部分的复杂页面都可以在完全不修改 JavaScript 代码的情况下,通过 CSS 的优化大幅提升 render performance。

CSS 优化主要是四个方面:

  1. 加载性能
    这个方面相关的 best practice 太多了,网上随便找一找就是一堆资料,比如不要用 import 啊,压缩啊等等,主要是从减少文件体积、减少阻塞加载、提高并发方面入手的,任何 hint 都逃不出这几个大方向。
  2. 选择器性能
    可以参考 GitHub 的这个分享 speakerdeck.com/jonroha,但 selector 的对整体性能的影响可以忽略不计了,selector 的考察更多是规范化和可维护性、健壮性方面,很少有人在实际工作当中会把选择器性能作为重点关注对象的,但也像 GitHub 这个分享里面说的一样——知道总比不知道好。
  3. 渲染性能
    渲染性能是 CSS 优化最重要的关注对象。页面渲染 junky 过多?看看是不是大量使用了 text-shadow?是不是开了字体抗锯齿?CSS 动画怎么实现的?合理利用 GPU 加速了吗?什么你用了 Flexible Box Model?有没有测试换个 layout 策略对 render performance 的影响?这个方面搜索一下 CSS render performance 或者 CSS animation performance 也会有一堆一堆的资料可供参考。
  4. 可维护性、健壮性
    命名合理吗?结构层次设计是否足够健壮?对样式进行抽象复用了吗?优雅的 CSS 不仅仅会影响后期的维护成本,也会对加载性能等方面产生影响。这方面可以多找一些 OOCSS(不是说就要用 OOCSS,而是说多了解一下)等等不同 CSS Strategy 的信息,取长补短。

你可以关注一下CSS Lint (

CSS Lint

),这是一个发现CSS书写问题,提升性能的工具,具体可以看这个文章:

挪墨的空间 / 关注 CSS Lint

我复制规则过来:

修复解析错误(Parsing errors should be fixed)
避免使用多类选择符(Don't use adjoining classes)
IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确,参考IE6下的多类选择符一文。

移除空的css规则(Remove empty rules)
这个规则不包含任何属性,类似:.foo { }空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

正确使用display的属性(Use correct properties for a display)
由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。

不滥用浮动(Don't use too many floats)
虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。

不滥用web字体(Don't use too many web fonts)
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

不声明过多的font-size(Don't use too may font-size declarations)
这是设计层面的问题,设计精良的页面不会有过多的font-size声明。

不在选择符中使用ID标识符(Don't use IDs in selectors)
主要考虑到样式重用性以及与页面的耦合性。

不给h1~h6元素定义过多的样式(Don't qualify headings)
全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。

不重复定义h1~h6元素(Heading styles should only be defined once)

值为0时不需要任何单位(Zero values don't need units)

标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)
通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:
.foo {-moz-border-radius: 5px;border-radius: 5px; }

使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)

避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)
CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。

遵守盒模型规则(Beware of broken box models)