requestAnimationFrame 请求动画帧（帧循环）

浏览器自带的防抖节流
requestAnimationFrame 请求动画帧（帧循环）

window.requestAnimationFrame(callback)

告诉浏览器希望执行一个动画，且要求浏览器在下次重绘前调用指定的回调函数更新动画。传参回调函数，该回调函数在浏览器下一次重绘前执行。

callback参数

下次重绘前更新动画帧调用的函数。该回调函数会被传入DOMHighResTimeStamp参数，该参数与performance.now()的返回值相同，表示requestAnimationFrame()开始执行回调函数的时刻。

返回值

long整数，请求ID，是回调列表中唯一的标识。非零值，没别的意义。
可以传该值给window.cancelAnimationFrame()取消回调函数

每执行一次，返回值数值加1

执行频率

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

不用手动设置执行间隔时间，根据浏览器屏幕刷新次数自动调整。浏览器屏幕刷新多少次，执行多少次。

屏幕刷新频率：屏幕每秒出现图像的次数。普通笔记本为60Hz

回调函数参数

同一个帧中多个回调函数，每一个会接收到一个相同的时间戳，即使在计算上一个回调函数的工作服在期间消耗一些时间，该时间戳是一个十进制数，单位毫秒，最小精度1ms(1000μs)
浏览器刷新时，执行所有requestAnimationFrame，且回调函数一样

function test1(timeStamp) {
  console.log("requestAnimationFrame1 ----", timeStamp);
  requestAnimationFrame(test1);
}
function test2(timeStamp) {
  console.log("requestAnimationFrame2 ----", timeStamp);
  requestAnimationFrame(test2);
}
requestAnimationFrame(test1);
requestAnimationFrame(test2);

浏览器优化

为了提高性能和电池寿命，大多数浏览器，当requestAnimationFrame()运行在后台标签页或隐藏的中，requestAnimationFrame()会被暂停调用来提升性能和电池寿命。

终止执行

window.cancelAnimationFrame()取消回调函数

如果要在特定条件下终止requestAnimationFrame需要把requestAnimationFrame的返回值作为参数传递给cancelAnimationFrame
也可以不用这个，直接加if判断

兼容性

ie9-浏览器不支持，可用setTimeout兼容

requestAnimationFrame，setTimeout，setInterval

setTimeout，setInterval不够精确。内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中等待执行时间。如果队列前面已加入了其他任务，动画代码就要等前面的任务完成后再执行，且如果时间间隔过短（小于16.7ms）会丢帧，会导致动画可能不会按照预设的执行，降低用户体验。

requestAnimationFrame用浏览器时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过渡绘制，消耗性能，时间过长，使用动画卡顿不流畅。会把每一帧中所有dom操作集中起来，在一次重绘或回流中完成，能让网页动画效果有统一的刷新机制，节省系统资源，提高系统性能改善视觉效果。

在隐藏或不可见元素中，不会进行重新重绘回流

requestAnimationFrame由浏览器专门为动画提供的API，运行时浏览器自动优化方法的调用，且页面如果不是激活状态下，动画会自动暂停，节省CPU开销