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