优化动画卡顿：卡顿原因分析及优化方案

目录

• 一、动画卡顿分析
  • 动画卡顿的原因
  • 页面渲染流程
• 二、优化方法
  • JavaScript：优化JavaScript的执行效率
  • Style：降低样式计算复杂度和范围
  • Layout：避免大规模、复杂的布局
  • Paint/Composite：GPU加速
• 三、参考

一、动画卡顿分析

动画卡顿的原因

大多数设备的刷新频率是60次/秒，也就是1秒钟的动画是由60个画面连在一起生成的，所以要求浏览器对每一帧画面的渲染工作要在16ms内完成。当渲染时间超出16ms时，1秒钟内少于60个画面生成，就会有不连贯、卡顿的感觉，影响用户体验。

页面渲染流程

一个页面帧在客户端的渲染分为以下几步：

1. JavaScript：JavaScript实现动画效果，DOM操作等。
2. Style（样式计算）：确认每个DOM元素应用的CSS样式规则。
3. Layout（布局）：计算每个DOM元素最终在屏幕上的大小和位置。由于DOM元素的布局是相对的，所以当某个元素发生变化影响了布局时，其他元素也会随之变化，则需要回退重新渲染，这个过程称之为reflow。
4. Paint（绘制）：在多个层上绘制DOM元素的文字、颜色、图像、边框和阴影等。
5. Composite（Render Layer合并）：按照合理的顺序合并图层并显示到屏幕上。 浏览器在实际渲染页面的时候需要经过一系列的映射，由HTML页面构建出来的DOM树到最终的图层，映射过程如下图(来源：参考[3])所示（注意下图类名在后续有所更改，RenderObject->LayoutObject，RenderLayer->PaintLayer）：
   

• Node->RenderObject：DOM树的每个Node都有一个对应的RenderObject（一对一关系，RenderObject包含了Node的内容）；

• RenderObject -> RenderLayer：一个或多个RenderObject对应一个RenderLayer（多对一），RenderLayer用于保证元素之间的层级关系，一般来说位于同一位置的且层级相同的元素位于同一个Render Layer，只有某些特殊的RenderObject会专门创建一个新的渲染层，其他的RenderObject与第一个拥有RenderLayer的祖先元素共用一个。常见的生成RenderLayer的RenderObject拥有以下的一种特征参考[3]：

  • 页面根元素
  • 有CSS定位属性（relative, absolute, fixed, sticky）
  • transparent不为1
  • overflow不为visible
  • 有CSS mask属性
  • 有CSS box-reflect属性
  • 有CSS filter属性
  • 3D或硬件加速的2D canvas元素
  • video元素

• RenderLayer -> GraphicsLayer：一个或多个RenderLayer对应一个GraphicsLayer（多对一），某些被认为是Compositing Layer的RenderLayer单独对应一个GraphicsLayer，其他RenderLayer与第一个拥有GraphicsLayer的祖先元素共用一个GraphicsLayer。每个GraphicsLayer有一个GraphicsContext用于绘制其对应的RenderLayers，合成器将GraphicsContexts的位图合成，最终显示到屏幕上。渲染层提升为合成层的原因如下：

  • 有3D transform属性
  • 有perspective属性
  • 3D canvas或硬件加速的2D canvas
  • 硬件加速的iframe元素（如iframe嵌入的页面有合成层，合成层需要硬件加速）
  • 使用了硬件加速的插件，如flash
  • 对opacity/transform属性应用了animation/transition（当animation/transition为active）
  • 子元素是compositing layer
  • 兄弟元素是compositing layer，与当前的非composting layer有重叠，层级低于当前层
  • 有will-change属性

二、优化方法

在网上可以看到很多的优化方案总结，大佬们都写的很好。

Talk is cheap. Show me the code.

结合页面渲染流程，这里将结合一些测试代码，分析动画的各种优化方案和效果&#