使用timeline分析动画性能

在使用动画的时候，在PC上看往往察觉不到太明显的卡顿，但在移动端中却会出现明显的卡顿，这是就要使用硬件加速来提升动画性能，具体可以看CSS动画的性能优化。

这篇文章主要写的是如何通过chrome的timeline来观察到动画性能的提升。

timeline面板可以用来录制页面运行的某一时间段，由此分析性能。
timeline面板主要包含以下几块：

1. Controls：一些选项，以及开始和停止记录的按钮
2. Overview：页面性能的高级汇总
3. 火焰图：CPU堆叠追踪的可视化。

在火焰图上会有三条垂直的虚线：

• 蓝色 DOMContentLoaded
• 绿色 首次绘制时间
• 红色 load事件

针对Overview表格，其包含以下三个图表：

1. FPS:每秒帧数
   绿色竖线越高，FPS 越高。
   红色部分代表长时间帧，可能会出现卡顿
2. CPU资源，此面积图指示CPU资源的事件类型
3. NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）。深色部分表示传输时间（下载第一个和最后一个字节之间的时间）。

这里不同的颜色对应不同类型的资源：

• HTML 文件为蓝色。
• 脚本为黄色。
• 样式表为紫色。
• 媒体文件为绿色。
• 其他资源为灰色。

通过刷新当前页面来记录页面加载，或者手动开始录制来记录页面交互。
接下来以一个动画的优化来实践一下：

我要做的是一个小方块周期性地移动，首先我写了这样的动画代码：

@keyframes ani1{ 
  0% { 
      left:10px; 
      top:10px;
    } 
  50%{
    left:20px;
    top:20px
  }
  100% { 
    left:10px; 
    top:0px;
  }  
}

方块绝对定位，改变left和top来改变其位置。
这时录制一下小方块动画运行期间的timeline：

可以在overview中看到中间存在红色的块，也就是表示这个帧的时间过长，可能会造成卡顿。我点了一个红色的区块，下面的details中显示此时的FPS为10，与60hz的刷新频率相比是极易造成卡顿的。

那么有了动画硬件加速的知识，我换成了下面的动画实现：

@keyframes ani2{ 
  0% { 
    transform:translate3d(10px,10px,0);
    } 
  50%{
    transform:translate3d(20px,20px,0);
  }
  100% { 
    transform:translate3d(10px,0px,0);
  }  
}

使用translate3d来开启硬件加速，来看看这时候的性能如何：

一点红色也没有！全都是绿色的竖条，且基本FPS就是在60左右，perfect！硬件加速确实有用！

总结：
运用timeline可以更加定量地分析动画性能，除了动画也可以看其他的性能，非常实用。