【语音解题系列】说说JS的事件循环机制 (含满分答题技巧)

说明

本题是面试常见题目，如果你知道了以下这2点，你可以关闭这个页面了。

1. async/await 执行顺序注意点是什么

2. 事件循环机制整体流程是什么

如果没有百分百把握，不妨花几分钟看看～

本题答题技巧总结见最后哦～

正文

JavaScript代码的执行过程中，除了依靠函数调用栈来搞定函数的执行顺序外，还依靠任务队列(task queue)来搞定另外一些代码的执行。整个执行过程，我们称为事件循环过程。一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。

macro-task大概包括：

• script(整体代码)

• setTimeout

• setInterval

• setImmediate

• I/O

• UI render

micro-task大概包括:

• process.nextTick

• Promise

• Async/Await(实际就是promise)

• MutationObserver(html5新特性)

整体执行，我画了一个流程图：

总的结论就是，执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。举个例子：