requestAnimationFrame

复盘字节加面，希望这次加面能过，加油！！！

实现动画效果的方法有：

1.CSS3：transition，animation

2.JS:setTimeout

3.HTML: requestAnimationFrom

setTimeout：容易出现卡顿、抖动的现象。原因是：1、settimeout任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；2、settimeout的固定时间间隔不一定与屏幕刷新时间相同，会引起丢帧。

requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

setTimeout和requestAnimationForm对比优势：

CPU节能：setTimeout当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，浪费CPU资源。requestAnimationFrame跟着系统步伐走会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。

函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。