[html] 第178天 你有用过HTML5的requestAnimationFrame吗？它运用的场景有哪些呢？
haizhilin2013 opened this issue · comments
第178天 你有用过HTML5的requestAnimationFrame吗？它运用的场景有哪些呢？
为什么要使用requestAnimation呢？
由于屏幕种类，分辨率，屏幕尺寸的不同，屏幕自动刷新的频率不同，使用requestAnimationFrame可以自动适配屏幕刷新频率。避免丢帧。
与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。除此以外，还可以节省CPU，函数节流。
总结一下：
requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画，不需要自行设置刷新时间
用法跟setTimeout/setInterval类似，也有对应的cancelAnimationFrame用于取消
对移动端比较友好
requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
运用场景：
1、js 动画：requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销
2、大数据渲染：在大数据渲染过程中，比如将后台返回的十万条记录插入到表格中，如果一次性在循环中生成 DOM 元素，会导致页面卡顿，用户体验差。这时候就可以用 requestAnimationFrame 进行分步渲染，确定最好的时间间隔，使得页面加载过程中很流畅。
The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
requestAnimationFrame 用于定义在下一帧重绘（repaint）前需要执行的方法，关键词是“重绘”，因此内部一般放置与 paint 相关的逻辑，以解决需要频繁调用的绘制逻辑与浏览器帧率不一致导致的卡顿问题。常见的场景是 canvas 绘制。
扩展阅读：requestIdleCallback，用于把一个任务打碎，在每一帧的“空闲时间”完成，
requestAnimationFrame 实为 event loop 中的一环，在页面绘制之前，
但并不会像 setTimeout 那些一样卡在调用栈中，所以会更流畅。
用在绘制 canvas 显示界面或执行动画等场景，very nice。
requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画，不需要自行设置刷新时间
用法跟setTimeout/setInterval类似，也有对应的cancelAnimationFrame用于取消
对移动端比较友好