神器requestAnimationFramerequestAnimationFrame是浏览器用于在页面重绘之前，通知

requestAnimationFrame是浏览器用于在页面重绘之前，通知 JavaScript 执行一个动画帧更新的函数。

一、工作原理

调用时机：
- requestAnimationFrame会在浏览器下一次重绘之前执行指定的回调函数。这通常是在屏幕刷新频率（一般为 60Hz）的基础上进行的，以确保动画的流畅性。
- 与传统的使用setInterval或setTimeout来实现动画不同，requestAnimationFrame能够根据浏览器的刷新节奏来调用回调函数，避免了不必要的计算和资源浪费。
递归调用：
- 通常在回调函数内部会再次调用requestAnimationFrame，以实现连续的动画效果。例如：

   function animate() {
     // 执行动画逻辑
     //...

     requestAnimationFrame(animate);
   }

   requestAnimationFrame(animate);

二、用途

动画制作：
- 可以用于创建流畅的动画效果，如移动元素、改变颜色、旋转图形等。由于它与浏览器的刷新频率同步，所以动画看起来更加平滑。
- 例如，可以使用requestAnimationFrame来实现一个简单的元素移动动画：

   const element = document.getElementById('myElement');
   let position = 0;

   function moveElement() {
     position++;
     element.style.left = position + 'px';
     requestAnimationFrame(moveElement);
   }

   requestAnimationFrame(moveElement);

2. 性能优化：

*   在进行复杂的页面更新或需要频繁更新的场景下，使用`requestAnimationFrame`可以避免不必要的重绘和计算，提高性能。

*   例如，在一个需要实时更新的游戏中，可以使用`requestAnimationFrame`来控制游戏的帧率，确保游戏的流畅性同时减少资源消耗。

三、注意事项

兼容性：
- 虽然现代浏览器广泛支持requestAnimationFrame，但在一些旧版本的浏览器中可能需要使用垫片（polyfill）来实现兼容。
取消动画：
- 如果需要停止动画，可以使用cancelAnimationFrame函数，并传入之前调用requestAnimationFrame返回的请求 ID。

   let requestId;

   function animate() {
     // 动画逻辑
     //...

     requestId = requestAnimationFrame(animate);
   }

   requestAnimationFrame(animate);

   // 停止动画
   cancelAnimationFrame(requestId);