JavaScript之异步编程详解（二）-优快云博客

本文链接：https://blog.youkuaiyun.com/Jarvan_I/article/details/137903455

文章的更新路线：JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题（HTML基础知识和CSS基础知识已经更新完毕）

正文

当我们编写JavaScript代码时，经常会遇到异步操作，比如网络请求、定时器等。为了保证代码的执行顺序和协调异步任务的回调函数，JavaScript引擎采用了Event Loop（事件循环）机制。ta是实现异步编程的核心，负责管理和调度 JavaScript 代码中的任务执行顺序，确保在单线程的环境下能够处理并发的任务。

JavaScript运行环境

在深入理解Event Loop之前，我们先来了解一下JavaScript的运行环境。JavaScript通常运行在浏览器中，也可以运行在Node.js等其他环境中。无论在哪个环境中，JavaScript的运行都是单线程的，即一次只能执行一个任务。

单线程模型

JavaScript 是一门单线程语言，意味着它只有一个主线程来执行代码。这个主线程负责执行 JavaScript 代码，并且处理用户交互、网络请求、定时器等任务。由于只有一个线程，所以一次只能执行一个任务，如果某个任务阻塞了主线程，那么其他任务就无法执行，会导致页面失去响应。

任务队列

为了解决单线程下的并发问题，JavaScript 引入了任务队列的概念。任务队列分为两种类型：宏任务（macrotask）和微任务（microtask）。

宏任务包括整体代码块、setTimeout、setInterval、I/O 操作等。
微任务包括Promise、MutationObserver、process.nextTick 等。

任务队列将所有的任务按照类别进行分类，并且每个任务都有一个优先级。在 Event Loop 的执行过程中，首先执行所有的微任务，然后再执行宏任务。每次执行一个任务后，检查是否有微任务需要执行，直到所有任务都被执行完毕。

Event Loop 过程

组成部分：

调用栈（Call Stack）：用于存储当前正在执行的代码的栈结构。当一个函数被调用时，会将其添加到调用栈中；当一个函数执行完成后，会从调用栈中移除。
微任务队列（Microtask Queue）：用于存储需要在下一次事件循环之前执行的微任务。微任务通常包括Promise的回调函数、async/await的await表达式等。
任务队列（Task Queue）：用于存储已经完成的宏任务的回调函数。

执行过程：

执行同步任务：从上到下依次执行代码中的同步任务。
执行微任务：执行所有微任务队列中的任务，直到微任务队列为空。微任务会在当前宏任务执行结束后立即执行。
更新渲染：如果浏览器需要进行页面重绘或回流，会执行该阶段。
执行宏任务：从宏任务队列中取出一个任务执行。执行完毕后，检查是否有微任务需要执行。
重复上述步骤：重复执行上述步骤，直到所有任务都被执行完毕。

示例代码


console.log('开始');

setTimeout(() => {
  console.log('异步任务1');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务1');
});

Promise.resolve().then(() => {
  console.log('微任务2');
});

console.log('结束');

输出顺序为：

开始

结束

微任务1

微任务2

异步任务1

解释

首先，同步任务 console.log('开始') 和 console.log('结束') 被执行，分别输出 "开始" 和 "结束"。
接着，微任务队列中添加了两个 Promise 的回调函数，它们会在当前宏任务执行结束后立即执行。
继续执行下一个宏任务，即定时器任务 setTimeout(() => { console.log('异步任务1'); }, 0)。由于定时器的时间设为 0，所以该任务会尽快被添加到宏任务队列中。
当前宏任务执行结束后，开始执行微任务队列中的任务。首先执行第一个 Promise 的回调函数，输出 "微任务1"；然后执行第二个 Promise 的回调函数，输出 "微任务2"。
最后，执行定时器任务，输出 "异步任务1"。