剖析 requestAnimationFrame 和 setTimeout 的奥秘：谁是真正性能之王？

2023-10-18 06:26:31

深入剖析 requestAnimationFrame 和 setTimeout：实现顺畅动画与精确时机的关键

在现代网络开发中，流畅的动画和精确的计时是打造卓越用户体验的基石。requestAnimationFrame 和 setTimeout 作为两大 JavaScript 计时器函数，在实现这些目标方面发挥着至关重要的作用。本文将深入探究这两个函数的工作原理、优点、适用场景，并帮助你做出最佳选择，以优化你的 web 应用程序的性能和用户互动。

requestAnimationFrame：浏览器刷新同步的动画利器

requestAnimationFrame 是一个浏览器原生的 API，它将指定的函数注册到浏览器的刷新队列中。浏览器通常以每秒 60 帧 (FPS) 的速度刷新，因此 requestAnimationFrame 会在每一帧渲染前执行注册的函数，确保动画与浏览器的刷新机制完美同步。

优势：

性能优化： 与 setTimeout 不同，requestAnimationFrame 与浏览器的刷新机制紧密结合，充分利用了浏览器的硬件加速功能，最大限度地提高动画的流畅性，避免掉帧。
电池寿命优化： requestAnimationFrame 仅在浏览器准备刷新时执行注册的函数，而 setTimeout 则会一直运行直到指定的延迟时间过去。因此，在没有动画或其他需要频繁更新元素的情况下，requestAnimationFrame 可以有效节省电量，延长电池寿命。
精确度： requestAnimationFrame 可以提供更精确的计时。它会根据浏览器的刷新率动态调整注册函数的执行时间，确保函数的执行与浏览器的刷新过程保持同步。

适用场景：

动画： requestAnimationFrame 是创建动画的理想选择，它可以确保动画在不同设备和浏览器上保持一致的流畅性，并避免掉帧现象。
游戏： requestAnimationFrame 也广泛应用于游戏开发中，它可以帮助游戏保持流畅的帧率，并避免游戏过程中的卡顿或延迟。
滚动效果： requestAnimationFrame 可用于创建平滑的滚动效果，当用户滚动页面时，requestAnimationFrame 会不断更新页面的内容，从而营造出流畅的滚动体验。

setTimeout：简单易用的定时任务与延迟执行

setTimeout 是一个 JavaScript 内置函数，它用于在指定的延迟时间后执行指定的函数。它通过创建一个计时器，在指定的时间间隔后触发函数的执行。

优势：

简单易用： setTimeout 的语法简单直观，上手容易。只需指定一个延迟时间和要执行的函数，无需考虑浏览器的刷新机制或其他复杂概念。
广泛兼容： setTimeout 在所有现代浏览器中都得到了广泛的支持，因此具有很强的兼容性，使其成为在不同浏览器和设备上实现计时功能的可靠选择。
可靠性： setTimeout 的执行是可靠的，只要指定的延迟时间过去，注册的函数就会被执行，不会受到浏览器刷新机制或其他因素的影响。

适用场景：

定时任务： setTimeout 非常适合用于执行定时任务，例如每隔一段时间自动刷新页面，或在用户离开页面一定时间后自动注销。
延迟执行： setTimeout 可以用于延迟执行某些任务，例如在用户点击按钮后延迟一段时间再执行某些操作，以模拟加载或处理过程。
动画： 虽然 setTimeout 也可以用于创建动画，但与 requestAnimationFrame 相比，它在动画方面的表现并不好。由于 setTimeout 的执行精度有限，可能会导致动画出现掉帧现象。