requestAnimatinFrame介绍

让浏览器执行一个动画，并要求浏览器在下次重绘之前使用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

1.语法

requestID = window.requestAnimationFrame(callback);

2.优缺点

• 优点:

  • 让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

  • 一旦页面不处于浏览器的当前标签，就会自动停止刷新。这就节省了CPU、GPU和电力。

  • 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流

• 缺点:

  • requestAnimationFrame是在主线程上完成。这意味着，如果主线程非常繁忙，requestAnimationFrame的动画效果会大打折扣。

3.执行时间

回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。

3.1屏幕刷新次数(屏幕刷新频率)

系统时间间隔===>取决于显示器刷新率有60赫兹(约16.7ms刷新一帧——1秒钟60帧 1000/60) 75赫兹等

MacBook pro刷新频率hz——此选项仅在 Mac 所连接的外部显示器支持更改刷新率时才会显示

3.2与setTimeout和setInterval间隔时间区别

• setTimeout/setInterval等待的时间造成了原本设定的动画时间间隔不精确

• setTimeout必须等待其他消息处理完再执行。

• 零延迟并不是回调立即执行，等待的时间取决于队列里等待处理的消息数量

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

https://javascript.ruanyifeng.com/htmlapi/requestanimationframe.html