2024年3月19日发(作者：)

requestanimationframe深入解析

requestAnimationFrame是一种用于在浏览器中执行动

画的API，它可以让浏览器在显示器下一次刷新时执行一帧

动画。与setTimeout和setInterval相比，requestAnimat

ionFrame具有更高的性能和更好的同步性，因为它是由浏览

器控制的，而不是由JavaScript代码控制的。

requestAnimationFrame的执行机制如下：

当页面被加载时，浏览器会开始运行一个动画帧循环。

这个循环会不断地执行，直到页面被关闭或导航到其他页

面。

在每个动画帧循环中，浏览器会检查是否存在未完成的

requestAnimationFrame请求。如果存在，浏览器会等待下

一次屏幕刷新，并在该时间点执行相应的动画帧。

当请求的动画帧被执行时，回调函数会被调用，并传递

一个时间戳参数。这个时间戳表示当前动画帧的开始时间。

在回调函数中，你可以使用这个时间戳来计算动画的进

度，并更新DOM元素的位置、颜色等属性，以实现动画效果。

requestAnimationFrame的优点包括：

性能优化：由于requestAnimationFrame是由浏览器控

制的，它可以在屏幕刷新时执行动画帧，从而避免了不必要

的重绘和回流，提高了性能。

同步性好：使用requestAnimationFrame可以确保动画

在不同的设备和屏幕分辨率上同步执行，从而提供一致的体

验。

更好的控制：通过requestAnimationFrame，你可以控

制动画的帧率、延迟和持续时间等参数，从而实现更好的动

画效果。

需要注意的是，requestAnimationFrame的回调函数会

在浏览器主线程上异步执行。这意味着如果你的回调函数包

含复杂的计算或DOM操作，可能会阻塞其他重要的任务，从

而导致页面卡顿或延迟。因此，在使用requestAnimationF

rame时，应该尽量保持回调函数的简洁和高效。