setInterval无法按预设间隔精准执行的漂移现象原因问询

漂移的核心成因 #

• 首先排除两个常见猜测：setInterval重新入队的直接开销、回调本身的执行耗时都不是示例中稳定5ms漂移的主要原因，核心是setInterval的原生设计逻辑和浏览器调度规则共同作用的结果。
• 第一是事件循环的排队阻塞：setInterval的回调不是到点就立刻执行，而是到点后被推入宏任务队列，需要等队列中前面的所有任务（包括其他宏任务、当前任务附带的所有微任务、UI渲染任务）都执行完成后才会被调用，排队等待的时间会直接叠加到两次回调的实际间隔上。
• 第二是浏览器的最小延时限制：W3C标准中明确规定，嵌套层级超过5层的定时器，浏览器会强制施加至少4ms的最小延时，用来避免定时器嵌套过密导致CPU占用过高。示例中每次稳定多出的5ms就是这个最小延时加上极少量的任务调度开销的总和。
• 第三是setInterval的计时起点逻辑：它不会主动对齐最初的启动时间计算下一次触发点，而是以上一次回调被推入队列的时间为起点叠加间隔，每次的排队延时会被累计到下一次的计时中，最终就会出现观察到的线性漂移现象。

为什么不设计为基于固定时钟点触发？ #

这种设计是为了避免回调堆叠导致的性能问题：假设设置了1s的间隔，但是某次回调因为业务逻辑复杂执行了3s，如果按固定时钟点触发的话，此时会有3个积压的回调等待执行，会瞬间占满主线程，甚至导致页面无响应。现有的setInterval设计会主动跳过已经过期的触发时机，保证同一时间事件队列里最多只有一个待执行的interval回调，避免性能灾难。

验证示例 #

你给出的测试代码可以稳定复现漂移现象：

const startTime = new Date().valueOf();

function printElapsedTime(startTime) {
  console.log(new Date().valueOf() - startTime);
}

let intervalObj = setInterval(printElapsedTime, 1000, startTime);

典型输出如下：

1005
2010
3015
4020

按每次5ms的漂移速率计算，运行100次后实际触发时间会比预设时间晚半秒，长时间运行后偏差会越来越明显。

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