浅谈JS的微任务和宏任务(附加面试题)

Event Loop

因为JS是单线程，就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。

掌握知识点

• JS分为同步任务和异步任务
• 同步任务都在主线程上执行，形成一个执行栈
• 主线程外，事件触发线程管理者异步任务
• 一旦执行栈中的所有同步任务执行完毕（此时JS处于空闲），系统就会读取异步任务，将异步任务添加到执行栈中，开始执行

宏任务（macrotask）

这里我们需要记住，浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染
结论：当前宏任务执行完毕，才执行DOM渲染
宏任务包含：

1. 新程序会子程序被直接执行
2. 事件的回调函数
3. setTimeout()和setInterval()
4. I/O
5. UI交互事件
6. setImmediate(Node.js 环境)

微任务(microtask)

记住：在某一个宏任务(macrotask)执行完后，就会将在它执行期间产生的所有微任务(microtask)都执行完毕（在渲染前）。
结论 执行顺序

macrotask -->  microtask --> DOM渲染 

微任务包含

1. Promise.then().catch().finally()
2. Object.observe
3. MutationObserver
4. process.nextTick(Node.js 环境)

运行机制

因为Event Loop 会不断循环队列
所以

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

async