解决css3卡顿和性能优化

今天遇到一个比较棘手的问题 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往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。

解决css3卡顿和性能优化

推荐阅读更多精彩内容