在使用动画的时候,在PC上看往往察觉不到太明显的卡顿,但在移动端中却会出现明显的卡顿,这是就要使用硬件加速来提升动画性能,具体可以看CSS动画的性能优化。
这篇文章主要写的是如何通过chrome的timeline来观察到动画性能的提升。
timeline面板可以用来录制页面运行的某一时间段,由此分析性能。
timeline面板主要包含以下几块:
- Controls:一些选项,以及开始和停止记录的按钮
- Overview:页面性能的高级汇总
- 火焰图:CPU堆叠追踪的可视化。
在火焰图上会有三条垂直的虚线:
- 蓝色 DOMContentLoaded
- 绿色 首次绘制时间
- 红色 load事件
针对Overview表格,其包含以下三个图表: