阅读 33

Event Loop

以上:JavaScript代码执行的大体过程

执行栈中的代码

同步代码的执行

遵循FILO、自上而下

function Foo() {
	Bar()
}
Foo()
复制代码

图片来源:segmentfault.com/a/119000001…

Event Loop

JavaScript实现异步的执行机制

  1. 首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table
  2. 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
  3. 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中(图一蓝色部分)

宏任务、微任务

宏任务和微任务在以上Event Loop第三步执行时的优先级不同。
当主线程空闲时,任务队列中的微任务先进入主线程执行,待任务队列中无微任务时再执行宏任务

宏任务:setTimeout、setInterval、script(整体代码)、 I/O 操作、UI 交互事件、postMessage 等

微任务:常见的有 Promise回调、MutationObserve 等(async 和 await实际上是 Promise 的语法糖)

参考:
event loop、进程和线程、任务队列
深入浅出浏览器事件循环

文章分类
前端
文章标签