Question

技术分类

todo: 优缺点的比较需要自己再通过代码进一步验证。

JavaScript

通过定时器刷新，间隔来改变元素样式。

CSS3

transition和animation。

HTML5

使用HTML5提供的绘图方式：

• canvas
• svg
• webgl

动画基本属性

绘制频率

页面每一帧变化都是系统绘制出来的（GPU或者CPU）。它的最高绘制频率受限于显示器的刷新频率（而非显卡），所以大多数情况下最高的绘制频率只能是每秒60帧（frame per second，简称fps），对应于显示器的60Hz。

刷新频率

图像在屏幕上更新的速度，也就是屏幕上的图像每秒出现的次数，单位是Hz，刷新频率越高，屏幕上图片闪烁感就越小，稳定性也就越高。人的眼睛不容易察觉75Hz以上刷新频率带来的闪烁感。

硬件加速

硬件有三个处理器：CPU、GPU和APU（声音处理器）。他们通过PCI/AGP/PCIE总线交换数据。GPU在浮点运算、并行计算等部分计算方面，明显高于CPU的性能。

fps

GPU渲染画面的频率, 游戏里谈到掉帧，是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps，但因为视觉暂留原理，我们看到的画面仍然是运动和连贯的。

Hz

显示器刷新屏幕的频率

参考资料

• 前端能力模型-动画类型及动画库的介绍
• CSS 和 JS 动画，哪个更快