JavaScript解密之旅----JS循环机制宏任务与微任务

JS循环机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为。

---

事件循环

防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：

• 一类是基于 Browsing Context，
• 一种是基于 Worker。
• 二者的运行是独立的，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。

一、任务队列

1. 概念

根据规范，事件循环是通过任务队列的机制来进行协调的。

• 一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合；
• 每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。
• 每进行一次循环操作称为 tick

2. tick关键步骤

• 在此次 tick 中选择最先进入队列的任务(oldest task)，如果有则执行(一次)
• 检查是否存在 Microtasks，如果存在则不停地执行，直至清空 Microtasks Queue
• 更新 render
• 主线程重复执行上述步骤

二、宏任务

1. 概念

• (macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）
• 为了JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，
  (macro)task->渲染->(macro)task->...

2. 场景

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

二. 微任务

1. 概念

• microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。
• 响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。

2. 场景

Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)

三、 运行机制

1. 图解

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

2. 案例分析

console.log(1)
new Promise((resolve) => {
     
    console.log(2);
    resolve()
}).then(() => {
     
    console.log(3);
}).then(()=>{
     
setTimeout(() => {
     
    console.log(4)
}, 0)
    console.log(5)
})
console.log(6);
setTimeout(() => {
     
    //执行后 回调一个宏事件
    console.log(7)
}, 0)
执行打印结果：    1、2、6、3、5、7、4

执行规则---->按顺序执行—>加载微任务---->加载宏任务

1. 按顺序自上执行先打印1
2. 在执行 Promise(）实例对象内部打印2
3. 异步promise.then推送至微任务队列3
4. 异步promise.then4进入微任务的宏任务队列，5进入3之后的微任务队列
5. 执行打印6
6. 7进入宏认为队列