今天遇到一个比较棘手的问题 css3的动画卡顿比较厉害 于是找各种方法 并一一去试 学会简单的处理方法和部分渲染原理
是否启用硬件加速GPU (Graphics Processing Unit)?
“用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能导致后者。
开启硬件加速在webkit中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。
- 尽量使用 transform 生成动画，避免使用 height,width,margin,padding 等
PS：使用 transform，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。简而言之，transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染
单线程，主线程和合成线程
一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。
相应地，合成线程负责：通过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。
为什么会造成动画卡顿呢？
原因就是主线程和合成线程调度不合理
浏览器如何渲染网页
1.使用 HTML 创建文档对象模型（DOM）
2.使用 CSS 创建 CSS 对象模型（CSSOM）
3.基于 DOM 和 CSSOM 执行脚本（Scripts）
4.合并 DOM 和 CSSOM 形成渲染树（Render Tree）
5.使用渲染树布局（Layout）所有元素
6.渲染（Paint）所有元素
http://jinlong.github.io/2017/05/08/optimising-the-front-end-for-the-browser/
[chrome的performance神器] 这属于性能优化https://www.jianshu.com/p/b70b72de3c32
- 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
- 如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
- 在webkit内核的浏览器中，另一个行之有效的方法是
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}
-
尽可能少的使用box-shadows与gradients
box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
