前言

稍微了解一下Javascript的都知道：Js是一门单线程的脚本语言

这一特点决定了它一次只能执行一个任务，比如使用alert()后，会弹出一个弹框，如果没有关闭弹框，alert()后面的代码就永远不会执行，脚本会一直卡在那

在日常开发中，我们不可避免的会运行一些耗时操作，如：网络请求、文件下载、用户交互等；这些任务的完成时间点是不确定的，我们不可能让脚本一直停在那等待任务完成；于是就有了异步任务的概念，先注册一个回调函数，规定在任务完成后调用这个函数，比如网络请求，我们虽然不知道什么时候完成，但我们知道完成后要干嘛，我们可以告诉主程序请求完成后通知我们，然后我们就可以继续做其它任务了

一句话总结：

Js脚本会按由上至下、由左至右的顺序执行，对于同步任务，则会立即执行，对于异步任务，则不同步执行，会在主程序(线程)空闲时执行

宏任务与微任务

首先，宏任务和微任务虽然都是异步任务，但它们的执行时机和优先级不同，它们的存在及作用主要是为了事件循环能够有效地管理异步操作、优化程序性能和确保代码高效、正确地执行，是事件循环用于处理异步任务区分的两个角色

一个栗子

就像去银行办业务一样，客户需要到柜台，找柜员办理业务，一个柜员同时只能帮一个客户办理业务；这就像Js的执行栈一样

在这个柜员的柜台下，会有一个个客户，都是来找柜员办理业务的，它们按号牌顺序排成一条队列，当柜员处理完前一个客户，空闲了，广播就会叫号，处理下一个客户的业务；这些客户，就像一个个宏任务一样

一个客户，可能有多个业务要办理，比如柜员帮客户处理完取钱业务后，会问客户还有什么业务需要办理的吗？此时客户说，我想把钱再存回去，柜员肯定不能说：“您回去再取个号重新排队”，只能继续处理客户的业务需求；当前客户的一个个业务需求，就像一个个微任务一样；当处理完当前客户的所有业务，才能轮到下一位

这就说明：有些问题，不如不问

只有处理完当前的所有微任务，才会执行下一个宏任务

常见的宏任务

setTimeout：设置一个定时器，在指定的时间后执行回调函数

setInterval：设置一个定时器，按指定的间隔重复执行回调函数

setImmediate(Node.js 特有)：在当前事件循环结束后立即执行的任务

I/O 操作：例如文件读写、网络请求等异步操作

UI 渲染任务：例如浏览器的重绘和回流任务

用户交互：如按钮点击、鼠标移动、键盘输入等的浏览器事件

requestAnimationFrame：请求动画帧，用于动画刷新

MessageChannel：通过 postMessage 触发的任务

Worker：Web Worker 中的消息处理

常见的微任务

Promise.then：Promise对象的then、catch和finally方法的回调函数

Async functions：使用async/await时，await后面的代码会被放入微任务队列

MutationObserver：用于观察 DOM 的变化

queueMicrotask：显式地将任务添加到微任务队列

process.nextTick(Node.js 特有)：在当前操作完成后立即执行的任务

事件循环

异步任务的出现是为了不阻塞我们的代码执行，但这并不会改变Javascript是单线程的本质，它还是一次只能执行一个任务

我们把异步任务区分为宏任务与微任务，它们会在程序空闲时执行，但什么时候是空闲的，什么时候该执行宏任务，什么时候又该执行微任务，这得有一个判断逻辑(标准)，事件循环(Event Loop)就是为了解决这一问题而出现的机制

事件循环就是用于管理异步任务的机制，它通过协调执行栈和任务队列中的任务，确保代码能够非阻塞地执行

任务队列

当异步任务(如setTimeout、Promise、DOM 事件等)被完成后，它们的回调不会立即执行，而是被放入任务队列中，等待执行

任务队列可以分为两个主要类别：宏任务队列和微任务队列

任务队列中的都是已完成的异步操作，而不是说注册一个异步任务就会被放在任务队列中，

就像在银行排号，如果叫到你的时候你去买菜了还没回来，不在那，那么你的号牌就作废了，柜员会选择直接跳过叫下一个号，等你回来以后需要重新取号

事件循环的执行步骤

执行同步代码：将同步代码压入执行栈中，依次执行

检查微任务队列：事件循环会检查微任务队列，如果队列中有任务，则按顺序执行所有微任务，直到队列清空

执行下一个宏任务：微任务队列清空后，事件循环会从宏任务队列中取出一个任务执行；执行完成后，会再次检查微任务队列，循环操作，直到所有的宏任务和微任务都被处理完毕

大概图示如下：

栗子

猜猜下面程序的输出顺序

先区分一下类别：

• 宏任务：setTimeout
• 微任务：Promise.then、await

步骤

首先，输出1；然后运行timer-1(异步，100 ms后才完成)，接着运行timer-2，将timer-2加入宏队列，运行asyncFunc，输出5；然后运行promise-2，输出6，接着其resolve完成了，将其加入微队列，由于await会等待，故其后面的9不会输出

此时：

宏队列：timer-2

微队列：promise-2

输出：1、5、6

继续，检查微队列，执行promise-2的then，输出7；执行timer-3，加入宏队列，继续执行输出9，执行完成，此时微队列任务全部执行完，队列为空

此时：

宏队列：timer-2，timer-3

微队列：

输出：1、5、6、7、9

取出一个宏队列任务执行，执行timer-2，输出10，执行promise-3，输出11，resolce完成后，将其加入微队列，本次宏任务执行完成

此时：

宏队列：timer-3

微队列：promise-3

输出：1、5、6、7、9、10、11

接着，检查微队列，执行promise-3的then方法，输出12，执行完成，微队列已清空

此时：

宏队列：timer-3

微队列：

输出：1、5、6、7、9、10、11、12

取出下一个宏任务timer-3，执行输出8，宏任务执行完成

在timer-1调用过了100 ms，异步任务完成，加入宏队列

此时：

宏队列：timer-1

微队列：

输出：1、5、6、7、9、10、11、12、8

取出timer-1，执行，输出2，然后执行promise-1，输出3，resolve完成后，将其加入微队列，宏任务执行完成

此时：

宏队列：

微队列：promise-1

输出：1、5、6、7、9、10、11、12、8、2、3

检查微队列，不为空，取出promise-1执行then，输出4

到此，微队列和宏队列均为空，程序执行完毕，最终输出如下：

总结

Js虽然是一门单线程的脚本语言，但通过事件循环机制，处理异步任务，合理地协调宏任务和微任务的执行顺序，能够确保代码高效运行并保持良好的用户体验，而不会阻塞