requestAnimationFram和setTimeout执行的先后

最新推荐文章于 2024-06-21 08:42:30 发布

weixin_30312557

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d4915c4e51d4561a705ba94

版权

编写时间：2019-08-06
更新时间：2019-08-06 14:03

作者：鬼小妞

目的：本文旨在给小白

关于两者执行的快慢影响因素 （点击直达）；
关于两者执行的快慢的分析 （点击直达）；

备注：本文整理及编写了与requestAnimationFram和setTimeout执行的先后相关的一些知识，仅供参考，描述不当的地方，请评论指正，也期待你参与编写

状态：更新完毕，待完善2019-08-06

requestAnimationFram和setTimeout执行的先后

为什么有时候requestAnimationFram在setTimeout之前执行？
为什么有时候setTimeout在requestAnimationFram之前执行？
到底是谁先执行，谁后执行

推荐你看完这两个博文：

总结

requestAnimationFrame执行步伐跟着系统的绘制频率走，就是说屏幕分辨率和屏幕尺寸会影响requestAnimationFrame的回调函数执行时间。
setTimeout 的执行只是在内存中通过设置一个间隔时间来运行代码，HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。同时setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，所以 setTimeout 的实际执行时机一般要比其设定的时间晚一些。

【关于两者执行的快慢影响因素】

requestAnimationFrame受系统的绘制频率影响，即屏幕分辨率和屏幕尺寸
setTimeout 受任务队列和页面渲染有关

【关于两者执行的快慢】

❤1.如果系统绘制率是 60Hz，那么requestAnimationFrame回调函数就每16.7ms 被执行一次；！！！在执行栈中【没有任何】的同步任务或异步微任务时！！！！：
- （1）没有页面重新渲染（0延迟），setTimeout()回调函数就会在4ms执行(就浏览器10ms)。此时setTimeout()比requestAnimationFrame快。
- （2）有页面重新渲染（最小延迟16ms）,setTimeout()回调函数就会在16ms执行. 此时setTimeout()比requestAnimationFrame快。
❤2.如果绘制频率是75Hz，那么requestAnimationFrame回调函数就每13.3ms 被执行一次；！！！在执行栈中【没有任何】的同步任务或异步微任务时！！！！：
- （1）没有页面重新渲染（0延迟），setTimeout()回调函数就会在4ms执行(就浏览器10ms)。此时setTimeout()比requestAnimationFrame快。
- （2）有页面重新渲染（最小延迟16ms）,setTimeout()回调函数就会在16ms执行. 此时requestAnimationFrame比setTimeout()快。