Notes

JavaScript 中的任务调度

首先，需要明确

• JavaScript 代码执行时只在单一线程上执行，即所谓的单线程
• 虽然 JavaScript 的执行是单线程，但 JavaScript 内置异步执行
  • 异步执行，即将某部分的代码推迟执行，在某个时机再获取此部分代码的执行结果
  • 通常，我们也会将耗时的代码块延迟执行，即将耗时短的代码优先执行，避免阻塞当前线程（由于单线程的原因，如果当前线程阻塞了，后面的代码就只能一直等待）。当然，到了耗时代码执行的时候，该阻塞的，还是会阻塞
• 我们可以将某一个段代码看作是一个任务，这段代码可能很短，甚至是一条语句；又或者很长，说不好就是 100 多行的代码

任务分类

在编写 JavaScript 代码时，我们可以自己创建异步执行的代码块，如使用 setTimeout, Promise

但实际上 setTimeout 与 Promise 的执行原理却不相同

宏任务 macrotasks

由 setTimeout 发起的异步任务，归类为宏任务

微任务 microtasks

由 Promise 发起的异步任务，归类为微任务，微任务总是会在一个宏任务中

执行过程

• 当我们没有创建异步任务时，可以将当前执行的环境看作一个宏任务 A
• 当使用 Promise 创建一个异步任务时，这是一个微任务 A1, 由于是在 A 中创建的微任务，因此 A1 是从属于宏任务 A, 当我们再使用 Promise 创建一个异步微任务 A2, 那此时，A 中包含了 A1, A2
• 当使用 setTimeout 创建一个异步任务时，这是另一个宏任务，称作 B。若在 B 中我们使用了 Promise 创建了一个微任务 B1(即在 setTimeout 的回调中创建), 那么微任务 B1 就从属于宏任务 B, 即此时，B 中包含了 B1

上面的过程，我们就有了两个宏任务 A, B, 其中每个宏任务又包含了各自的微任务，A(A1, A2), B(B1)

而要执行宏任务 B, 实际上，需要等待宏任务 A 完成，而宏任务 A 的完成，又需要等待其微任务们的完成，于是上面的执行顺序依赖为

B -> B1 // 宏任务 B 的完成要依赖 B1 是否完成
B -> A // 宏任务 B 是否能开始，需要依赖宏任务 A 是否结束
A -> (A1, A2) // 宏任务 A 是否完成，需要依赖 A1, A2 是否都完成

于是

• 微任务总是先于宏任务完成，这句话实际上省了好多信息：
  • 这里的宏任务指的是下一个宏任务
  • 这里的微任务指的是当前宏任务中的微任务
• 如果一个宏任务中的微任务没有完成，那么这个宏任务就会一直等待，实际上就形成了一个小型的「事件循环」