这次，彻底理解 JavaScript 的执行机制

@大迁世界

于 2024-06-21 08:30:13 发布

阅读量666

点赞数 23

本文链接：https://blog.csdn.net/qq449245884/article/details/139872437

版权

无论你是 JavaScript 的初学者还是专家，无论是为了求职面试还是日常开发工作，我们经常会遇到这样的情况：给出几行代码，我们需要知道它们的输出内容和顺序。由于 JavaScript 是一种单线程语言，我们可以得出以下结论：

JavaScript 按照语句出现的顺序执行。

此时，读者可能会说：我知道 JS 是一行一行执行的，为什么还要特别指出呢？冷静下来；正因为 JS 是一行一行执行的，我们假设所有的 JS 都是这样工作的：

let a = '1';
console.log(a);

let b = '2';
console.log(b);

然而，实际上 JS 是这样的：

setTimeout(function(){
  console.log('定时器开始了')
});
new Promise(function(resolve){
  console.log('即将执行for循环');
  for(var i = 0; i < 10000; i++){
    i == 99 && resolve();
  }
}).then(function(){
  console.log('执行then函数')
});
console.log('代码执行结束');

遵循 JavaScript 按语句顺序执行的概念，我自信地写下了输出：

定时器开始了。
即将执行for循环。
执行then函数。
代码执行结束。

然而，在 Chrome 中验证时，结果完全错误，瞬间迷惑，难道不是按约定的一行一行执行的吗？

我们需要彻底理解 JavaScript 的执行机制。

关于 JavaScript

JavaScript 是一种单线程语言。尽管在最新的 HTML5 中引入了 Web Worker，但 JavaScript 的单线程核心没有改变。因此，JavaScript 中的所有“多线程”都是使用单线程模拟的，所有的多线程都是欺骗性的！

JavaScript 事件循环

由于 JavaScript 是单线程的，就像只有一个窗口的银行，客户需要一个接一个地排队办理业务。同样，JavaScript 任务也需要一个接一个地执行。如果一个任务花费太长时间，那么下一个任务就必须等待。所以问题来了：如果我们想浏览新闻，但新闻中的高清图片加载缓慢，我们的网页是否必须一直卡住，直到图片完全显示？因此，聪明的程序员将任务分为两类：

同步任务
异步任务

当我们打开一个网站时，网页的渲染过程由一堆同步任务组成，如渲染页面骨架和页面元素。那些消耗资源多、耗时长的任务，如加载图片或音乐文件，则是异步任务。为了简化理解，我们使用思维导图来说明这一点：

如果用文字描述思维导图的内容：

同步任务和异步任务进入不同的执行“场所”，同步任务进入主线程，异步任务进入事件表并注册函数。
当指定任务完成时，事件表会将这个函数移动到事件队列中。
主线程中的任务执行完毕后，会从事件队列中读取相应的函数并在主线程中执行。
上述过程会不断重复，这通常被称为事件循环（Event Loop）。

我们不禁要问，如何知道主线程执行栈是否为空？JavaScript 引擎有一个监视过程，持续检查主线程执行栈是否为空。一旦为空，它就会去事件队列中检查是否有等待调用的函数。

经过以上描述，一段代码可能会更直观：

let data = [];
$.ajax({
    url: 'www.javascript.com',
    data: data,
    success: () => {
        console.log('发送成功');
    }
})
console.log('代码执行结束');

上面是一段简单的 ajax 请求代码：

ajax 进入事件表并注册回调函数 success。
执行 console.log('代码执行结束')。
ajax 事件完成，回调函数 success 进入事件队列。
主线程从事件队列中读取并执行回调函数 success。

通过以上的文字和代码，相信你对 JavaScript 的执行顺序有了初步的了解。接下来，让我们研究一个高级话题：setTimeout。

对 setTimeout 的爱恨情仇

众所周知，setTimeout 无需过多介绍。我们对它的第一印象是它可以在延迟之后异步执行。我们经常使用它来实现 3 秒延迟执行：

setTimeout(() => {
    task();
}, 3000)
console.log('执行 console');

随着 setTimeout 的使用逐渐增多，问题也随之而来。有时，即使在代码中指定了 3 秒的延迟，函数也会在 5 或 6 秒后执行。这可能是什么原因造成的呢？

我们先看一个例子：

setTimeout(() => {
    task();
}, 3000)
console.log('执行 console');

根据我们之前的结论，setTimeout 是异步的，所以同步任务 console.log 应该先执行。因此，我们的结论是：

执行 console
task()

为了验证，结果是正确的！然后让我们对之前的代码做一些修改：

setTimeout(() => {
    task();
}, 3000)

sleep(10000000)

乍一看，这似乎类似，但当我们在 Chrome 中执行这段代码时，发现 console 的执行时间远远超过 3 秒。为什么现在需要这么长时间呢？

此时，我们需要重新定义 setTimeout。让我们来讨论上面代码的执行过程：

task() 进入事件表并注册，计时开始。
执行非常缓慢的 sleep 函数，计时继续。
3 秒钟过去，计时事件 timeout 完成。task() 进入事件队列。但是，sleep 太慢，还没有执行完毕；所以我们必须等待。
最后，sleep 执行完毕。task() 终于从事件队列移动到主线程执行。

经过上述过程，我们了解到 setTimeout 函数会在指定时间后将任务（在这个例子中是 task()）添加到事件队列中。由于任务在单线程环境中一个接一个地执行，如果前面的任务执行时间过长，执行时间将显著超过 3 秒。

我们经常遇到类似 setTimeout(fn, 0) 的代码。0 秒后执行意味着什么？它能立即执行吗？

答案是否定的。setTimeout(fn, 0) 的意思是指定某个任务在主线程最早的空闲时间执行，不需要等待任何额外的秒数，一旦所有同步任务在栈中完成并且栈变为空。例如：

// 代码 1
console.log('先执行这里');
setTimeout(() => {
    console.log('执行了')
}, 0);

// 代码 2
console.log('先执行这里');
setTimeout(() => {
    console.log('执行了')
}, 3000);

代码 1 的输出结果是：

先执行这里
执行了

代码 2 的输出结果是：

先执行这里
... 3 秒后
执行了

关于 setTimeout 需要注意的是，即使主线程空闲，0 毫秒也无法实现。根据 HTML 标准，最小值为 4 毫秒。感兴趣的同学可以自行探索。

双胞胎兄弟 setInterval

谈到 setTimeout，我们不能错过它的双胞胎兄弟 setInterval。它们很相似，只不过后者是循环执行的。从执行顺序来看，setInterval 会在每个指定的间隔时间将注册的函数放入事件队列。如果前一个任务花费太长时间，它也需要等待。

唯一需要注意的是，对于 setInterval(fn, ms)，我们已经知道 fn 不会每 ms 秒执行一次，而是在每 ms 秒将一个新的 fn 实例放入事件队列。如果 setInterval 的回调函数（fn）花费的时间超过了延迟时间（ms），那么将不会有明显的时间间隔。请仔细思考这句话。

Promise 和 process.nextTick(callback)

我们已经研究了传统的定时器，接下来，我们将探索 Promise 和 process.nextTick(callback) 的表现。

Promise 的定义和功能在本文中不会详细展开。而 process.nextTick(callback) 类似于 Node.js 中的 “setTimeout”，在事件循环的下一轮调用回调函数。

切入正题，除了同步任务和异步任务的广义定义外，我们还有更精细的任务定义：

宏任务（macro-task）：包括整体代码、setTimeout、setInterval
微任务（micro-task）：Promise、process.nextTick

不同类型的任务将进入相应的事件队列；例如，setTimeout 和 setInterval 将进入同一个事件队列。

事件循环中的事件顺序决定了 JavaScript 代码的执行顺序。在进入整体代码（宏任务）后，它开始其第一次循环。然后，它执行所有的微任务。接下来，它再次从宏任务开始，直到一个任务队列完成，再次执行所有的微任务。听起来有点复杂；让我们用本文前面的一个代码片段来说明：

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');

这段代码作为宏任务进入主线程。
遇到 setTimeout，它的回调函数被注册并分派到宏任务事件队列中。
接下来，遇到 Promise，new Promise 立即执行，并将 then 函数分派到微任务事件队列中。
遇到 console.log()，立即执行。
在作为第一个宏任务执行整体代码后，我们看看有哪些微任务。我们发现 then 在微任务事件队列中，并执行它。
事件循环的第一轮结束。让我们从宏任务事件队列开始第二轮循环。我们发现这个队列中对应于 setTimeout 的回调函数立即执行。
结束

事件循环、宏任务和微任务之间的关系如图所示：

我们分析一段更复杂的代码，看看您是否理解了 JavaScript 的执行机制：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

事件循环第一轮过程分析如下：