js 中的 Event Loop 以及宏任务与微任务

weixin79893765432...

已于 2023-01-12 22:48:21 修改

阅读量805

点赞数

分类专栏： JavaScript 文章标签： event loop 宏任务微任务

于 2022-11-23 13:54:03 首次发布

本文链接：https://blog.csdn.net/mChales_Liu/article/details/121958130

版权

JavaScript 专栏收录该内容

84 篇文章 6 订阅

订阅专栏

前言

1、JS 的执行引擎与执行环境

简单来说，为了让 JavaScript 运行起来，要完成两部分工作（当然实际比这复杂的多）：

Engine（执行引擎）：编译并执行 JavaScript 代码，完成内存分配、垃圾回收等。
Runtime（执行环境）：为 JavaScript 提供一些对象或机制，使它能够与外界交互。

在 JavaScript 运行的时候，JavaScript Engine 会创建和维护相应的堆（Heap）和栈（Stack），同时通过 JavaScript Runtime 提供的一系列 API（例如：setTimeout、XMLHttpRequest 等）来完成各种各样的任务。

2、js 是单线程的

进程：
- 资源分配的最小单位。
- 指在系统中正在运行的一个应用程序。
- 程序一旦运行就是进程。

线程：
- 程序执行的最小单位。
- 系统分配处理器时间资源的基本单元，或者说进程之内独立执行的一个单元执行流。

JavaScript 是一种单线程的编程语言，只有一个调用栈，决定了它在同一时间只能做一件事情。

在 JavaScript 的运行过程中，真正负责执行 JavaScript 代码的始终只有一个线程，通常被称为主线程，各种任务都会用排队的方式来同步执行。

然而 JavaScript 却又是一个非阻塞（Non-blocking）、异步（Asynchronous）、并发式（Concurrent）的编程语言，这就得说说 JavaScript 的事件循环（Event Loop）机制了。

一、事件循环（Event Loop）

事件循环（Event Loop）是让 JavaScript 做到既是单线程，又绝对不会阻塞的核心机制，也是 JavaScript 并发模型（Concurrency Model）的基础，是用来协调各种事件、用户交互、脚本执行、UI 渲染、网络请求等的一种机制。简而言之——Event Loop 是 JS 实现异步的一种机制。

Event Loop 包含 2 种：一种存在于 Browsing Context 中，还有一种在 Worker 中。

二者的运行是独立的。也就是说，每一个 JavaScript 运行的“线程环境”都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。

二、任务队列

Event Loop（事件循环）是通过任务队列的机制来进行协调的。

任务队列的特点：

一个事件循环中可以有一个或者多个任务队列，一个任务队列便是一系列有序任务的集合。
每个任务都有一个任务源，同一个任务源的任务必须放到同一个任务队列中。
setTimeout、Promise 等 API 便是任务源，而进入任务队列的是他们指定的具体执行任务。

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

在此次 tick 中选择最先进入队列的任务（oldest task），如果有则执行（一次）；
检查是否存在 Microtasks，如果存在则不停地执行，直至清空 Microtasks Queue；
更新 render；
主线程重复执行上述步骤。

在上述 tick 的基础上需要了解几点：

JS 分为同步任务和异步任务；
同步任务都在主线程上执行，形成一个执行栈；
主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件；
一旦执行栈中的所有同步任务执行完毕（此时 JS 引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

三、宏任务与微任务

1、宏任务

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染——(macro)task->渲染->(macro)task->...。

宏任务包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel 和 setImmediate(Node.js 环境)。

2、微任务

microtask 可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout 是 task）会更快，因为无需等渲染。也就是说，在某一个 macrotask 执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

微任务包含：Promise、async/await、Object.observe、MutationObserver 和 process.nextTick(Node.js 环境)。

3、宏任务与微任务的运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

执行一个宏任务（栈中没有就从事件队列中获取）
执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
当前宏任务执行完毕，开始检查渲染，然后 GUI 线程接管渲染
渲染完毕后，JS 线程继续接管，开始下一个宏任务（从事件队列中获取）

四、Event Loop 实例

1、案例一

console.log(1);
 
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});
 
new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})
 
setTimeout(() => {
  console.log(6);
})
 
console.log(7);

// 输出结果：1 4 7 5 2 3 6

解析：
首先需要知道的知识点包括：

js 是从上往下执行的。
promise 的两个作为参数的回调函数里的内容（除了 resolve(); 和 reject(); 函数外），也是与全局同步执行的。
执行顺序：同步代码 > 微任务代码 > 宏任务代码。async/await 函数会有点特殊。

执行步骤：

首先会执行同步的代码，输出：1,4,7。
执行微任务，此时的微队列中的任务为 Promise 中的 resolve(5) 则输出：5。
执行宏队列中的队首任务（注意只执行一个宏任务）,此时的队首任务为代码中第一个setTimeOut，则输出了：2。在执行这个任务时又产生了一个新的微任务。
执行新产生的微任务，所以输出了：3。
然后宏队列中还有一个任务，于是输出：6。

2、案例二

function fn2 () {
  console.log(1);
  return new Promise(resolve => {
    resolve(2);
    console.log(3);
  })
}
console.log(4);
fn2().then(res => console.log(res));
console.log(5);

// 输出结果：4 1 3 5 2

解析：

js 是从上往下执行的，首先会执行同步的代码：4。
然后执行函数 fn2()：1。
然后执行函数里 promise 对象里的同步代码：3，而 resolve() 里的内容会在微任务里稍后执行。
走完 fn2() 函数的同步逻辑后，会执行同步的代码： 5。
然后才是 fn2() 函数里的微任务代码（异步）：2。

3、案例三

async function fn1 () {
  console.log(1);
  await new Promise(resolve => {
    resolve(2);
    console.log(3);
  })
  console.log(4);
  return 5;
}

console.log(6);
fn1().then(res => console.log(res));// 不会打印 2，而是会打印 5
console.log(7);

// 输出结果：6 1 3 7 4 5

解析：
首先需要知道的知识点包括：

async 函数总是会返回一个 promise 对象。
async 函数中，await 会中断同步代码的执行，需等到 await 代码执行完后才会继续执行同步代码。（执行顺序：async 函数外的同步代码 > async 函数里的同步代码。）

执行过程如下：

首先会执行同步的输出：6。
然后会执行函数 fn1() 里在 await 之前的同步的代码：1。
然后会执行 await 标记的 promise 对象里的同步代码：3。而 resolve() 里的内容会在微任务里稍后执行。等待被 await 标记的代码（包括微任务和宏任务）执行完之后才会执行其后的代码。
然后会继续执行 async 函数之外的同步的代码：7。
然后会执行 async 函数里的 await 标记之后的同步的代码：4。
然后，一般会在 then() 的回调函数里执行 resolve() 里传入的内容，可是接下来执行的 return 语句会覆盖掉 resolve() 传入的内容，作为 then() 回调函数的入参，所以之后会打印：5，而不是 2，因为 2 被 5 覆盖了。

【参考文章】
深入理解 JavaScript Event Loop-阿里 CCO 体验技术专刊首发
 js中的宏任务与微任务
 JavaScript 运行机制详解：再谈Event Loop

weixin79893765432...

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js 中的 Event Loop 以及宏任务与微任务

Engine（执行引擎）：编译并执行 JavaScript 代码，完成内存分配、垃圾回收等。Runtime（执行环境）：为 JavaScript 提供一些对象或机制，使它能够与外界交互。在 JavaScript 运行的时候，JavaScript Engine 会创建和维护相应的堆（Heap）和栈（Stack），同时通过 JavaScript Runtime 提供的一系列 API（例如：setTimeout、XMLHttpRequest 等）来完成各种各样的任务。
复制链接

扫一扫