requestAnimationFrame JS - Javascript

requestAnimationFrame是JavaScript中一种优化的动画循环的方式。它允许浏览器在下一次重绘之前执行JavaScript代码，这样就可以实现流畅的动画效果，同时避免了一些常见的卡顿和延迟问题。

语法

window.requestAnimationFrame(callback);

• callback：当浏览器准备好重绘时要调用的函数。

用法

使用 requestAnimationFrame 来循环执行动画。 在每一次重绘之前，浏览器会通知你的 JavaScript 代码，这样你就可以在动画帧之间添加代码。 这种循环方式相对于setTimeout，setInterval 或者其他的方法而言，有着更好的性能和能耗。

function animate() {
  // 在此添加动画逻辑

  requestAnimationFrame(animate);
}
animate();

取消动画

通过 cancelAnimationFrame 取消动画。

var requestID = requestAnimationFrame(animate);
cancelAnimationFrame(requestID);

兼容性

requestAnimationFrame 在主流浏览器中都有良好的兼容性，但是在一些旧版浏览器中可能需要使用兼容代码。

// 兼容代码
window.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function (f) { return setTimeout(f, 1000 / 60) } // 低版本浏览器退化到setTimeout

性能优化

使用 requestAnimationFrame 可以避免不必要的 CPU 消耗以及电池功耗。

有一些常见的情况，使用 requestAnimationFrame 的性能优化技巧可以保持你的代码更加流畅：

• 避免使用 display: none 来隐藏元素。如果一个隐藏的元素使用 requestAnimationFrame 绑定了动画循环，那么该元素仍然会被浏览器重绘，从而导致性能浪费。
• 减少不必要的 DOM 操作。如果一个元素没有发生变化，那么就不需要改变它的样式和属性等。这些操作都会导致浏览器进行重排和重绘，从而影响性能。
• 避免不必要的嵌套循环。每一个嵌套的循环都会导致更多的性能开销，应该尽量避免这些情况。
• 尽量使用 CSS3 动画。 CSS3 动画是经过优化的，性能更好，因此应该尽量使用这种方法来实现动画效果。

结论

使用 requestAnimationFrame 来实现动画循环是一种非常优秀的方式，可以实现流畅的动画效果，避免常见的卡顿和延迟问题。同时，在使用时应该注意一些性能优化的技巧，以避免不必要的性能开销，保持代码的流畅性和可维护性。