js加密之requestAnimationFrame的调用频率探讨

最新推荐文章于 2025-04-03 13:38:14 发布

mxd01848

最新推荐文章于 2025-04-03 13:38:14 发布

阅读量809

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/mxd01848/article/details/145982324

版权

requestAnimationFrame 的执行频率是由 浏览器的刷新率 决定的。通常情况下，浏览器的刷新率是 60Hz，也就是每秒刷新 60 次，因此 requestAnimationFrame 的回调函数大约每 16.67 毫秒（1 秒 / 60 次） 执行一次。

关键点

刷新率（Frame Rate）：
- 大多数现代显示器的刷新率是 60Hz，即每秒刷新 60 次。
- 一些高端显示器的刷新率可能更高，例如 120Hz 或 144Hz，此时 requestAnimationFrame 的执行频率也会相应提高。
执行时机：
- requestAnimationFrame 的回调函数会在浏览器下一次重绘之前执行。
- 它会自动与浏览器的刷新周期同步，确保动画的流畅性。
节能机制：
- 如果页面处于不可见状态（例如用户切换到了其他标签页），requestAnimationFrame 会自动暂停执行，以减少 CPU 和 GPU 的消耗。

执行频率示例

60Hz 显示器：
- 每 16.67 毫秒执行一次。
- 1 秒内执行 60 次。
120Hz 显示器：
- 每 8.33 毫秒执行一次。
- 1 秒内执行 120 次。

如何验证执行频率？

可以通过以下代码测量 requestAnimationFrame 的实际执行间隔：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>requestAnimationFrame Timing</title>
</head>
<body>
    <script>
        let previousTime = performance.now();
        let frameCount = 0;

        function logFrameTime(currentTime) {
            frameCount++;
            const delta = currentTime - previousTime;
            console.log(`Frame ${frameCount}: ${delta.toFixed(2)} ms`);

            previousTime = currentTime;
            requestAnimationFrame(logFrameTime);
        }

        requestAnimationFrame(logFrameTime);
    </script>
</body>
</html>

运行 HTML

输出示例（60Hz 显示器）：

Frame 1: 16.67 ms
Frame 2: 16.67 ms
Frame 3: 16.67 ms
...

输出示例（120Hz 显示器）：

Frame 1: 8.33 ms
Frame 2: 8.33 ms
Frame 3: 8.33 ms
...

与 `setTimeout` 和 `setInterval` 的区别

特性	`requestAnimationFrame`	`setTimeout` / `setInterval`
执行频率	与浏览器刷新率同步（通常 60Hz）	手动设置时间间隔（可能不精确）
节能机制	页面不可见时自动暂停	不会自动暂停
动画流畅性	更流畅，避免掉帧	可能出现卡顿或掉帧
适用场景	动画、游戏等高性能需求	简单的定时任务