requestAnimationFrame与EventListener回调是串行还是并发执行？

结论 #

你提到的两类回调完全不会出现并发执行的情况，一定会按调度顺序逐个执行，这是浏览器端JavaScript的核心运行机制决定的。

核心原理 #

浏览器的JS引擎是单线程运行的，同一时间只能执行一段JS代码，所有异步回调（包括DOM事件回调、requestAnimationFrame回调、定时器回调等）都需要进入对应任务队列排队，等待当前执行栈完全清空后才会被依次取出执行，绝对不会出现两个回调同时运行的情况。

两类回调的具体调度规则 #

• 你代码里注册的keydown等DOM事件回调属于宏任务队列，事件触发后回调会按触发顺序加入队列，等待当前执行栈清空后执行。如果触发事件时已有JS代码在运行，f1会等这段代码完全执行结束才会被调用，不会打断正在运行的代码。
• requestAnimationFrame（简称rAF）的回调属于渲染前专属队列，会在每帧屏幕刷新前、当前所有待执行的宏任务、微任务都处理完成后，按注册顺序批量执行。你代码里循环调用的f2，每一次调用都只会在下一帧的rAF队列里排队，不会和其他回调穿插运行。

注意事项 #

如果某个回调执行时间过长（比如单个回调执行耗时超过16ms），会阻塞后续所有回调的执行，比如f1执行花了200ms，那f2的rAF回调就会被推迟200ms执行，会出现明显的页面掉帧、交互延迟问题。

内容的提问来源于stack exchange，提问作者Shuri2060