移动网页动画卡顿之硬件加速

为什么要使用硬件加速

动画实现一个物体从a 到 b ，通常使用css（left, top）属性 @keyframes 控制百分比来执行动画或js 来控制。

在移动网页执行动画部分android手机，会出现卡顿现象。为了解决卡顿现象，可以使用css3

transform中的translate() 来代替 top 和 left

transform: translate(200px ,0)     ===> left: 200px;

transform: translate(0, 200px)     ===>top: 200px;

 

使用transform属性不会触发浏览器的repaint， 而left 和 top 则会一直触发repaint,下图是从chrome 开发工具timeline面板检测到数据：

 

上图数据中的绿色条纹表示的就是使用 top 和 left 实现动画时浏览器发生的 repaint 操作，从中可以看出动画帧数远低于 60 帧。

下面是css3  transform检测到的数据：

动画执行期间没有过多的repaint操作。

 

硬件加速的工作原理

浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中 transform 是不会触发 repaint 的。 

 

使用 GPU 渲染元素

并不是所有的CSS属性都能触发GPU的硬件加速，实际上只有少数属性可以，比如下面的这些：

• transform
• opacity
• filter

 

强制使用GPU渲染

为了避免 2D transform 动画在开始和结束时发生的 repaint 操作，我们可以硬编码一些样式来解决这个问题。

.div{
   transform: translateZ(0);
}

会开启硬件加速

 

使用硬件加速的注意事项

• 内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。
• 使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。

 

具体参考来源