setTimeout、setInterval 和 requestAnimationFrame

与 setTimeout 和 setInterval 不同，requestAnimationFrame 不需要设置时间间隔， 大多数电脑显示器的刷新频率是 60Hz，大概相当于每秒钟重绘 60 次。大多数浏览器都 会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也 不会有提升。因此，最平滑动画的最佳循环间隔是 1000ms/60，约等于 16.6ms。 RAF 采用的是系统时间间隔，不会因为前面的任务，不会影响 RAF，但是如果前面的 任务多的话， 会响应 setTimeout 和 setInterval 真正运行时的时间间隔。 特点： （1）requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回 流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。 （2）在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然 就意味着更少的 CPU、GPU 和内存使用量 （3）requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动 优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销

标签：浏览器,setInterval,间隔,requestAnimationFrame,setTimeout,重绘
来源： https://www.cnblogs.com/jycom/p/16632920.html