这个悲伤的故事就是本文的引子，真真切切的体会到了 CSS 对用户体验的影响非常明显，稍有不慎就是一个大坑。下面，我们就来谈谈 CSS 性能优化的问题。

加载性能

选择器性能

对整体性能的影响可以忽略不计了，但是选择器的考究更多是为了规范化和可维护性、健壮性。具体怎么实施可以参考 Github 的这个分享：GitHub's CSS Performance by Jon Rohan

渲染性能

渲染性能是 CSS 优化最重要的关注对象。我们先来了解一下浏览器的渲染机制。

浏览器的渲染机制

浏览器渲染展示网页的过程，大致分为以下几个步骤：

1.解析HTML(HTML Parser)

2.构建DOM树(DOM Tree)

3.渲染树构建(Render Tree)

4.绘制渲染树(Painting)

慎重选择高消耗的样式

什么 CSS 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。

避免过分重排(Reflow)

简单解释一下 Reflow：当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。

怎么减少 Reflow

1.不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className

2.把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来

3.不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

4.尽可能不要修改影响范围比较大的 DOM

5.为动画的元素使用绝对定位 absolute / fixed

6.不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

避免过分重绘(Repaints)

当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。

优化动画

CSS3 动画是优化的重中之重。除了做到上面两点，减少 Reflow 和 Repaints 之外，还需要注意以下方面。

启用 GPU 硬件加速

GPU（Graphics Processing Unit） 是图像处理器。GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。
GPU 加速可以不仅应用于3D，而且也可以应用于2D。这里， GPU 加速通常包括以下几个部分：Canvas2D，布局合成（Layout Compositing）, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。

/*
 * 根据上面的结论
 * 将 2d transform 换成 3d
 * 就可以强制开启 GPU 加速
 * 提高动画性能
 */div { transform: translate(10px, 10px);}div { transform: translate3d(10px, 10px, 0);}

需要注意的是，开启硬件加速相应的也会有额外的开销，参见这篇文章 CSS 硬件加速的好与坏