编写时间：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()快。
