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 创建 C