第136篇:动画API:setInterval 与 requestAnimationFrame的区别

好家伙,书接上文

 

function animate() {　　　　　
        //请求-动画-框架
        requestAnimationFrame( animate );
        //改变正方体在场景中的位置,让正方体动起来
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render( scene, camera ); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）
            }

这是一段动画的渲染方案

这里使用了requestAnimationFrame()而没有使用定时器setInterval

动画渲染部分为什么不使用定时器setTimeout而使用requestAnimationFrame()?

window.requestAnimationFrame() 

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

该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。

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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----来自MDN文档

说到定时器setInterval,我们又要扯到异步,

js引擎单线程执行的,它是基于事件驱动的语言.它的执行顺序是遵循一个叫做事件队列的机制.

浏览器有各种各样的线程,比如事件触发器,网络请求,定时器等等.线程的联系都是基于事件的.

js引擎处理到与其他线程相关的代码,就会分发给其他线程,他们处理完之后,需要js引擎计算时就是在事件队列里面添加一个任务.

这个过程中,js并不会阻塞代码等待其他线程执行完毕,而且其他线程执行完毕后添加事件任务告诉js引擎执行相关操作.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　----来自setTimeout 与 requestAnimationFrame 的区别 - 掘金 (juejin.cn)

 

 

所以说,定时有"被卡住的可能",他必须等前面的任务完成.

而刷新时间变长,帧数就会下降

而requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；

也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，改善视觉效果。

 

 

所以我们总结一下:

requestAnimationFrame()优势:

1.requestAnimationFrame()更流畅

定时器setInterval存在延迟卡顿的问题

而使用 requestAnimationFrame 执行动画，能保证回调函数在屏幕每一次刷新间隔中只被执行一次，

确保不丢帧，动画不卡顿

2.requestAnimationFrame()更合理

定时器setInterval的执行频率由时间决定

而requestAnimationFrame()的执行频率与浏览器屏幕刷新次数相匹配

3.节约资源

当页面被隐藏时,定时器 setInterval 仍在后台执行动画任务

而requestAnimationFrame()的动画刷新会暂停