这个悲伤的故事就是本文的引子，真真切切的体会到了 css 对用户体验的影响非常明显，稍有不慎就是一个大坑。下面，我们就来谈谈 css 性能优化的问题。
加载性能
减少文件体积，压缩代码
减少阻塞加载，不要用 import
提高并发（这个不甚理解）
选择器性能
对整体性能的影响可以忽略不计了，但是选择器的考究更多是为了规范化和可维护性、健壮性。具体怎么实施可以参考 github 的这个分享：github's css performance by jon rohan
渲染性能
渲染性能是 css 优化最重要的关注对象。我们先来了解一下浏览器的渲染机制。
浏览器的渲染机制
浏览器渲染展示网页的过程，大致分为以下几个步骤：
1.解析html(html parser)
2.构建dom树(dom tree)
3.渲染树构建(render tree)
4.绘制渲染树(painting)
慎重选择高消耗的样式
什么 css 属性是高消耗的？就是那些绘制前需要浏览器进行大量计算的属性。
box-shadows
border-radius
transparency
transforms
css filters（性能杀手）
避免过分重排(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 硬件加速的好与坏