如何精确计算Web动画的每秒帧数FPS？

本文共计2930个文字，预计阅读时间需要12分钟。

目录 + 流畅动画的标准 + 法一：借助 Chrome + 开发者工具 + 法二：借助 Frame Timing API + Blink 内核早期架构 + JS 动画与 CSS 动画的区别 + 什么是 Frame Timing API？ + Frame Timing API 的意义 + 法三：借助 requ

目录

• 流畅动画的标准
• 法一：借助 Chrome 开发者工具
• 法二：借助 Frame Timing API
• Blink 内核早期架构
• JS 动画与 CSS 动画的细微区别
• 什么是 Frame Timing API ？
• Frame Timing API 示意
• 法三：借助 requestAnimationFrame API
• 使用 requestAnimationFrame 计算 FPS 原理

流畅动画的标准

首先，理清一些概念。FPS 表示的是每秒钟画面更新次数。我们平时所看到的连续画面都是由一幅幅静止画面组成的，每幅画面称为一帧，FPS 是描述“帧”变化速度的物理量。

理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。