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

目录

  • 前言
    • 1、JS 的 执行引擎 与 执行环境
    • 2、js 是单线程的
  • 一、事件循环(Event Loop)
  • 二、任务队列
  • 三、宏任务 与 微任务
    • 1、宏任务
    • 2、微任务
    • 3、宏任务与微任务的运行机制
  • 四、Event Loop 实例
    • 1、案例一
    • 2、案例二
    • 3、案例三


前言

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 引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。
    js 中的 Event Loop 以及 宏任务 与 微任务_第1张图片

三、宏任务 与 微任务

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 线程继续接管,开始下一个宏任务(从事件队列中获取)
    js 中的 Event Loop 以及 宏任务 与 微任务_第2张图片

四、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

你可能感兴趣的:(JavaScript,event,loop,宏任务,微任务)