requestAnimationFrame 没有损失上下文角度

在前端开发中，动画的实现一直是一个重要的话题。在很长一段时间里，我们使用的主要是 setTimeout 或 setInterval 来实现动画效果。然而，这种方法并不完美。其中一个主要问题就是：这种方案的动画效果在不同的设备、浏览器、系统下可能会有很大的差异，可能会出现卡顿、抖动等问题。

为了解决上述问题，HTML5标准中引入了 requestAnimationFrame 接口。requestAnimationFrame 是一个比 setTimeout 或 setInterval 更高效的动画实现方案，并且支持更好的浏览器优化。

requestAnimationFrame 概览

requestAnimationFrame（简称 rAF）是一个让浏览器告诉你什么时候准备好了执行动画的 API。通常，浏览器需要在确认每帧都可用（包括用户用鼠标滚动的一些情况，不会卡住整个页面）后才开始执行动画，否则就会出现卡顿、抖动等效果。

这个 API 的基本用法如下：

const step = function() {
  // do something
  window.requestAnimationFrame(step);
};

window.requestAnimationFrame(step);

可以看到，使用 requestAnimationFrame 可以非常简洁地实现动画效果，而且性能更好，也不会出现卡顿、抖动等问题。

requestAnimationFrame 与 setTimeout/setInterval 的区别

与 setTimeout/setInterval 不同，requestAnimationFrame 会把回调函数放到浏览器主线程最后的渲染中执行。这意味着回调函数执行的时机一定是最佳的，让动画效果更加流畅并消除卡顿或抖动现象。

requestAnimationFrame 的优缺点

requestAnimationFrame 相比 setTimeout/setInterval 拥有以下优点：

1. 更好的动画渲染效果
2. 更加节能，对电池的消耗更小
3. 可以更好地提高页面的性能

但是也有以下缺点：

1. 动画的使用场景有限，不适用于短时间内只需要渲染一张或<20帧的场景
2. 兼容性问题，在某些浏览器、移动端操作系统下可能会出现不兼容的情况

总体来说，requestAnimationFrame 在实现流畅的动画效果方面非常优秀。在实际开发中，可以根据具体需求来选择使用。当需要实现高质量的动画效果时，考虑使用 requestAnimationFrame；当需要处理一些简单的动画时，setTimeout/setInterval 也可以胜任。