😯从 “小白” 到 “大神”：轻松吃透 JS 事件循环机制

WildBlue
155 阅读10分钟

一、JS 单线程的奇妙之旅

image.png

JavaScript 是一种单线程语言，这意味着它在同一时刻只能做一件事。就好比我们去排队买奶茶，只能一个一个人地买，前面的人买完了，后面的人才能接着买。JS 的单线程也是如此，它会按照代码的顺序依次执行任务。

这种单线程的设计是为了避免一些麻烦。因为 JavaScript 最初被设计用来操作浏览器的 DOM（文档对象模型）。想象一下，如果允许多线程同时操作 DOM，就可能会出现混乱的情况，比如一个线程正在修改某个节点，而另一个线程却要删除这个节点的父节点，这样就会导致不可预测的错误。所以，JS 采用单线程模型，确保所有的任务都能按顺序执行，避免了同步冲突。

在单线程中，同步任务会尽快执行完，然后才会去处理其他事情，比如渲染页面（重绘重排）或者响应用户的交互（这可是优先处理的哦）。但是，如果遇到一些耗时性的任务，比如网络请求或者复杂的计算，该怎么办呢？总不能让整个程序都卡住吧，这时候就需要异步任务来帮忙啦。

二、异步任务的神秘面纱

image.png

同步操作就像是我们按部就班地做事，一件事做完了才能做下一件事，在等待任务完成的过程中，程序会处于 “阻塞” 状态。而异步操作则不同，它可以让任务并发执行，程序不需要等待这个任务完成，就可以直接去执行其他任务。

比如说我们做饭，同步做饭就是先洗菜，洗完菜才能切菜，切完菜才能炒菜，一步一步来，中间不能穿插其他事情。而异步做饭呢，我们可以先把菜洗好，然后在切菜的时候，同时打开电饭锅煮饭，不用等到切完菜再去煮饭，这就是异步操作的好处，它不会阻塞主线程，可以提高程序的效率。

在 JS 中，常见的异步任务有很多，比如setTimeout和setInterval定时器，它们可以在指定的时间后执行回调函数；还有fetch或ajax网络请求，用于从服务器获取数据；另外，addEventListener注册的事件处理函数，在事件触发时也是异步执行的。

三、事件队列的大揭秘

image.png

当我们有了异步任务，就需要一个地方来存放这些任务的回调函数，等待主线程空闲的时候去执行，这个地方就是事件队列。可以把事件队列想象成电影院排队检票的队伍，异步任务完成后，它的回调函数就会加入到这个队伍中，等着主线程来 “检票” 执行。

比如说我们使用setTimeout设置了一个定时器任务：

console.log("开始");
setTimeout(() => {
    console.log("异步任务完成");
}, 2000);
console.log("继续执行主线程代码");

在这个例子中，console.log("开始")和console.log("继续执行主线程代码")是同步任务，会立即执行。而setTimeout是异步任务，它会把回调函数() => { console.log("异步任务完成"); }交给浏览器的定时器线程处理，当 2 秒时间到了，这个回调函数就会被放入事件队列中，等待主线程的调用栈清空后，再被取出来执行。

四、宏任务和微任务的对决

image.png

（一）宏任务大集合

宏任务是事件循环中的 “主要任务”。常见的宏任务包括script（整体代码，这也是一个宏任务哦）、setTimeout、setInterval、I/O 操作、UI 渲染等。每次事件循环都会从宏任务队列中取出一个任务并执行。

例如：

console.log('宏任务开始');
setTimeout(() => {
    console.log('setTimeout宏任务回调');
}, 1000);
console.log('宏任务结束');

在这段代码中，首先执行的是console.log('宏任务开始');和console.log('宏任务结束');这两个同步任务，它们属于script宏任务的一部分。然后setTimeout的回调函数会被放入宏任务队列，等待 1 秒后执行。

（二）微任务小家族

微任务是一种优先级更高的任务，它们通常在当前宏任务结束后立即执行。常见的微任务有promise.then()、MutationObserver（它可以在 DOM 改变且在页面渲染前拿到 DOM 的改变）、queueMicrotask以及process.nextTick()（在 Node.js 环境中）。

比如下面这个例子：

console.log('同步代码开始');
Promise.resolve().then(() => {
    console.log('Promise微任务回调');
});
console.log('同步代码结束');

这里，先执行console.log('同步代码开始');和console.log('同步代码结束');这两个同步任务。然后Promise.resolve().then(() => { console.log('Promise微任务回调'); })会创建一个微任务，当同步代码执行完，调用栈清空后，会立即执行微任务队列中的这个微任务，所以会先打印出 “同步代码开始”，“同步代码结束”，然后再打印 “Promise 微任务回调”。

（三）宏微任务执行顺序大挑战

事件循环的执行顺序是这样的：首先执行一个宏任务（从宏任务队列中取出），然后检查微任务队列并执行所有的微任务，直到队列清空，接着如果有 UI 渲染的需求，就会进行渲染更新 UI，最后再去取下一个宏任务执行，如此循环往复。

看下面这个复杂一点的例子：

console.log('script开始');
setTimeout(() => {
    console.log('setTimeout宏任务1');
    Promise.resolve().then(() => {
        console.log('setTimeout中的Promise微任务1');
    });
}, 0);
Promise.resolve().then(() => {
    console.log('Promise微任务1');
});
console.log('script结束');

执行过程如下：

  1. 首先执行console.log('script开始');和console.log('script结束');，这是script宏任务中的同步代码。
  2. 然后Promise.resolve().then(() => { console.log('Promise微任务1'); })创建一个微任务，放入微任务队列。
  3. setTimeout虽然设置的延迟时间为 0，但它的回调函数还是会被放入宏任务队列。
  4. 同步代码执行完后，开始处理微任务队列，执行console.log('Promise微任务1');。
  5. 微任务队列清空后，从宏任务队列中取出setTimeout的回调函数执行，打印console.log('setTimeout宏任务1');。
  6. 在setTimeout的回调函数中，又有一个Promise.resolve().then(() => { console.log('setTimeout中的Promise微任务1'); })创建的微任务，会立即被放入微任务队列。
  7. setTimeout的回调函数执行完后，再次检查微任务队列，执行console.log('setTimeout中的Promise微任务1');。

五、浏览器进程与线程的江湖传说

image.png

（一）多进程的武林大会

在计算机世界里，进程是分配资源的最小单元。它就像是一个独立的小王国，有自己的内存（包括地址和物理内存），还有获得 CPU 计算的机会，每个进程都有独立的进程 ID，并且会占用一定的大小和开销。程序的运行是以进程为单位的。

Chrome 浏览器是多进程架构，它包含浏览器主进程、多个渲染进程等。浏览器主进程是多线程的，它负责管理各个子进程，比如处理浏览器的界面显示、用户交互等。而一个 tab 页就是一个渲染进程，也是多线程的，这样即使一个页面 crash 了，其他页面也不会受到影响，保证了浏览器的稳定性和安全性。

（二）线程的秘密使命

线程是真正干活的角色。它在进程的范围内，负责执行具体的任务。比如在渲染进程中，有专门的主线程来执行 JS 代码、解析 HTML 和 CSS 等。多线程可以提高程序的执行效率，但是线程之间的通信和协作也比较复杂。

进程和线程的区别在于，进程是资源分配的单元，而线程是 CPU 调度的单元。进程之间的通信开销比较大，而同一进程内的线程之间通信相对容易一些。

（三）浏览器中的线程风云

渲染进程的主线程是非常重要的角色，它的主要工作包括解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树，然后结合 DOM 树和 CSSOM 树生成渲染树，接着进行布局（layout），合并图层，最后由 V8 引擎执行 JS 代码。此外，还有独立的绘制线程来负责页面的绘制工作。

对于setTimeout，它有专属的定时器线程，当设定的时间到了，定时器线程会把setTimeout的回调函数放入宏任务队列中。而addEventListener注册的事件处理函数没有独立的线程，当事件触发时，会直接将事件处理函数放入宏任务队列。fetch或xhr网络请求则有专属的下载线程，负责从服务器获取数据，数据获取完成后，会把回调函数放入宏任务队列。

六、事件循环机制的终极奥秘

image.png

（一）事件循环的魔法循环

事件循环的核心原理就是通过不断地从任务队列中获取任务并执行，来实现异步逻辑。它就像是一个永不停歇的魔法循环，一直在运行。

当 JavaScript 脚本开始执行时，首先会执行同步代码，这些代码会在调用栈中依次执行。当遇到异步操作时，会把异步操作交给对应的宿主环境（比如浏览器）处理，而主线程继续执行后续的同步代码。当同步代码执行完，调用栈清空后，会先检查微任务队列，把微任务队列中的所有任务都执行完，然后再从宏任务队列中取出一个宏任务执行，执行完这个宏任务后，又会重复检查微任务队列、执行微任务、取宏任务执行的过程，如此循环往复。

（二）代码中的事件循环

来看下面这个综合的代码示例：

console.log('开始');
setTimeout(() => {
    console.log('setTimeout宏任务');
    Promise.resolve().then(() => {
        console.log('setTimeout中的Promise微任务');
    });
}, 1000);
Promise.resolve().then(() => {
    console.log('Promise微任务');
});
console.log('结束');
// 假设这里有一段复杂的同步代码，模拟耗时操作
for (let i = 0; i < 1000000000; i++) {}

在这个例子中：

  1. 首先执行console.log('开始');和console.log('结束');，这是同步代码。
  2. 然后Promise.resolve().then(() => { console.log('Promise微任务'); })创建微任务放入微任务队列。
  3. setTimeout的回调函数放入宏任务队列。
  4. 接着执行那段复杂的同步代码，这会阻塞主线程一段时间。
  5. 同步代码执行完后，调用栈清空，开始处理微任务队列，执行console.log('Promise微任务');。
  6. 微任务队列清空后，等待 1 秒时间到，从宏任务队列中取出setTimeout的回调函数执行，打印console.log('setTimeout宏任务');。
  7. 在setTimeout的回调函数中，又创建了一个微任务Promise.resolve().then(() => { console.log('setTimeout中的Promise微任务'); })，会立即执行，打印console.log('setTimeout中的Promise微任务');。

七、总结与回顾

image.png

JS 事件循环机制是 JavaScript 执行模型的核心内容。我们回顾一下，JS 是单线程的，这是为了保证 DOM 操作的安全性。为了处理异步任务，引入了事件循环机制，异步任务的回调函数会被放入事件队列中等待执行。

任务队列分为宏任务队列和微任务队列，宏任务包括script、setTimeout等，微任务包括promise.then()等。事件循环的执行顺序是先执行一个宏任务，然后处理所有微任务，接着可能进行 UI 渲染，再取下一个宏任务执行，如此循环。

此外，我们还了解了浏览器的进程和线程架构，以及它们与事件循环的关系。希望通过这篇文章，大家能对 JS 事件循环机制有更深入的理解，在以后的开发中，能够更好地利用这个机制来处理异步任务，写出更高效、更稳定的代码。记得多实践哦，通过实际写代码来加深对事件循环机制的理解，这样才能真正掌握它，从 “小白” 变成 JS 高手！

avatar
文章
阅读
粉丝