CSS优化和提高性能的方法

大部分的复杂页面都可以在完全不修改 JavaScript 代码的情况下，通过 CSS 的优化大幅提升 render performance。

加载性能

• 通过 rel="preload"进行内容预加载，减少阻塞加载

• 不要用 import，@import 影响 css 文件的加载速度，提高并发。

• 压缩 CSS，减小体积

• CSS 精灵图

选择器性能

• 避免使用复杂的选择器，层级越少越好

• 避免使用多类选择符

  IE6 以及更古老的浏览器对类似.foo.bar 的多类选择符解析不正确，参考 IE6 下的多类选择符一文。

• 移除空的 css 规则

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

• 慎用一些 CSS 属性 比如 box-shadow、border-radius、filter、透明度、:nth-child 等等

• 正确使用 display 的属性

  由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。CSS Lint 会检查一下几点：

  • display:inline 后不应该再使用 width、height、margin、padding 以及 float。

  • display:inline-block 后不应该再使用 float。

  • display:block 后不应该再使用 vertical-align。

  • display:table-*后不应该再使用 margin 或者 float。

• 不滥用浮动

  虽然浮动不可避免，但不可否认很多 css bug 是由于浮动而引起。CSS Lint 一旦检测出样式文件中有超过 10 次的浮动便会提示警告。

• 不滥用 web 字体

  对于中文网站来说 Web Fonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。

• 不声明过多的 font-size

  这是设计层面的问题，设计精良的页面不会有过多的 font-size 声明。

• 不在选择符中使用 ID 标识符

  主要考虑到样式重用性以及与页面的耦合性。

• 不给 h1~h6 元素定义过多的样式

  全站统一定义一遍 heading 元素即可，若需额外定制样式，可使用其他选择符作为代替。

• 不重复定义 h1~h6 元素

• 值为 0 时不需要任何单位

• 标准化各种浏览器前缀

  通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：.foo {-moz-border-radius: 5px;border-radius: 5px; }

• 使用 CSS 渐变等高级特性，需指定所有浏览器的前缀

• 避免让选择符看起来像正则表达式

  CSS3 添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。

• 遵守盒模型规则

渲染性能

• 尽可能通过 CSS 过渡/动画创建动画。如果动画真的很复杂，再不得不依赖于 JavaScript 动画。

• 减少 text-shadow 的使用

• 字体抗锯齿

• 合理利用 GPU 加速

可维护性、健壮性

• 利用 CSS 继承减少代码量

• 合理命名

• 结构层次设计健壮

• 可重用性

• 可扩展性

• 可修改性

• OOCSS 面向对象的 CSS

  • 结构和样式分离
  • 容器和内容分离