硬件加速

CSS3 硬件加速又叫做 GPU(图形处理器) 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案

创建独立图层

将频繁重绘回流的 DOM 元素单独作为一个独立图层，那么这个 DOM 元素的重绘和回流的影响只会在这个图层中。

• 3D 或者透视变换（perspective，transform） 的 CSS 属性。
• 使用加速视频解码的 video 元素。
• 拥有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素。
• 混合插件（Flash)。
• 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素。
• 拥有加速 CSS 过滤器的元素。
• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)。
• 元素有一个兄弟元素在复合图层渲染，并且该兄弟元素的 z-index 较小，那这个元素也会被应用到复合图层。

触发硬件加速

四个 css 属性可以触发硬件加速

1. transform

2. opacity

3. filter

4. will-change

transform

有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题

1. transform: translate3d(0, 0, 0);

2. transform: translateZ(0);

will-change

will-change 属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高 CSS 动画的执行效率

值：

1. auto: 实行标准浏览器优化。

2. scroll-position: 指明元素的滚动位置将会出现动画变化，浏览器应该为滚动视窗内容的不可见部分事先做好准备。

3. contents: 指明元素的内容将会发生变化，浏览器不要缓存它们的内容。

4. <custom-ident>: 指明 will-change 实施的目标属性，比如 transform 或 opacity。

开启 GPU 硬件加速可能触发的问题

1. 通过 transform:transition3d/translateZ 开启 GPU 硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动

解决办法：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;