javascript - chrome中测试setTimeout设置为0，为什么会出现不符合预期规范的情况？

Question

问题描述

在测试下列代码：

setTimeout(() => {    console.log(1)}, 20)for (let i = 0; i < 999999999; i++) {    // do something 40ms}setTimeout(() => {    console.log(2)}, 0)

根据定时器的相关规范，预测结果应该是：
1，2
因为第一个定时器先注册，在浏览器API或Node中完成计时后，进入宏任务队列，那么栈顶肯定是他；等for循环结束后，第二个定时器注册，并同样在完成计时后，进入宏任务队列；最后，执行宏任务队列，输出就应该是1，2。

实际测试结果：
chrome：2，1
edge：2，1
firefox：1，2
node：1，2

测试环境

chrome：115.0.5790.172（正式版本） （64 位）
edge：115.0.1901.203 (正式版本) (64 位)
firefox（developer)：117.0b6 (64 位)
node：v18.16.1

（笔记本性能：32gb内存，AMD Ryzen 7 5800H，应该可以排除硬件问题）

尝试理解其原因

1. 基于chromium内核的浏览器，定时器实现存在差异。
2. 可能是for循环导致的，我换成另一种方式阻塞，输出的结果就符合预期。

setTimeout(() => {    console.log(1)}, 20)await new Promise((resolve, reject) => setTimeout(resolve, 3000));setTimeout(() => {    console.log(2)}, 0)

这段代码，在chrome和edge中测试都是输出为1，2。

请教问题

出现这种情况是到底是什么原因导致的呢？chrome浏览器和设置定时器为0都是挺常用的，还望大佬不吝赐教。

Answer 1

setTimeout 0应该是被优化直接放到宏队列头了，虽然时间到了，但是当前执行并没有完成，所以第一个20毫秒的定时器超时任务还不会被调度如何会出现在宏队列头，所以在宏队列并不会出现在0毫秒之前，这才是正确的

输出1 2才是有问题的，firefox和node输出这个，应该是setTimeout虽然被设置为0毫秒超时，但实际内部有最小超时时间，并不是0毫秒超时的，所以自然会在第一个20毫秒后面执行了

使用await会输出1 2是应该await里边的setTimeout时间较长，当前执行已经切换出去，第一个setTimeout就可以被调度到了，自然先执行，也是正确的