在实习做一个移动项目的时候，实现一个动画效果，在 iphone 和 chrome 上调试没有问题，在千元左右的 android 机上测试问题就很大了，卡顿非常明显，百思不得其解，吐血，卒。
这个悲伤的故事就是本文的引子，真真切切的体会到了 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 硬件加速的好与坏
