为何JavaScript同步代码示例中首条console.log未提前输出？

问题场景 #

我尝试演示JavaScript的同步执行逻辑，编写了如下代码：

console.log('First line of code');
for (let i = 0; i < 10000000000; i++) {
    let j = i + i;
}
console.log('Last line of code');

预期执行逻辑是：先输出First line of code，接着执行循环模拟停顿，最后输出Last line of code。但实际运行时，先出现长时间停顿，随后两条日志同时显示。

换成循环次数0到10且每次迭代输出日志的示例时，结果符合预期：先输出第一条日志，再输出循环内的日志，最后输出第二条日志。

原因解析 #

1. JavaScript单线程执行的本质：JS主线程是单线程模型，所有同步任务会按顺序进入执行栈依次执行——代码确实是先执行第一个console.log，再执行循环，最后执行第二个console.log，你的同步执行逻辑理解是正确的。
2. 浏览器控制台的缓冲优化：浏览器为了提升性能，对console.log的输出做了缓冲处理。当遇到耗时极长的同步任务（比如你的超大循环）时，主线程被完全占用，控制台无法即时刷新输出，会暂时把console.log的内容存到缓冲区里。直到当前执行栈的所有同步任务（循环+第二个console.log）全部完成后，才一次性将缓冲区的内容输出到控制台，所以看起来两条日志是同时出现的。
3. 小循环的即时输出逻辑：当循环次数很少时，整个同步任务执行时间极短，控制台的缓冲机制还没触发，就能在每个任务执行后即时刷新输出，所以你能看到日志依次出现的预期效果。

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