requestAnimationFrame js动画

requestAnimationFrame用于在下一个动画帧执行回调，它的执行和你的屏幕帧率保持一致，并且会在页面关闭时暂停执行。回调接收一个参数，即距离上一个动画帧的时间间隔。

这个API就像天生为js动画存在，与传统的setInterval相比，你无需在意多久更新一次动画，因为更新的速度如果太慢会造成画面卡顿，太快会造成性能浪费，而requestAnimationFrame则与屏幕帧率保持一致。

并且requestAnimationFrame的兼容性非常好，以我们最讨厌的IE举例，从IE10就开始支持requestAnimationFrame

不过这个API还有一些别的作用，由于它会在下一个动画帧前执行，我也经常用它来等待页面渲染完成。例如我更改了一个元素的style，但由于浏览器渲染机制，样式并不会立刻生效。此时就可以使用requestAnimationFrame来等待页面渲染。

const ele = document.querySelector('div')

ele.style.transition = '0.5s'
window.requestAnimationFrame(() => {
    // 样式生效后的操作
})