Blog.

什么是 JavaScript Event Loop

LiuuY

Event Loop 是 JavaScript 的并发模型，为了是协调 Call Stack 与 Callback 执行的机制。

  • 因为 JavaScript 是单线程的，所以 Call Stack 中一次只能执行一个函数（内部嵌套会 Push 到 Call Stack 中），不同于多线程的并发模型，函数的执行不能被打断。

  • 当存在回调时，Callback 函数并不会存入 Call Stack 中，而是会保持到一个 Queue 中，等待触发。这其中包含两种 Queue：Task Queue （也称作 Macrotask Queue）和 MicroTask Queue。

  • 当 Call Stack 为空并且 Queue 中的 Callback 达到触法条件时，Event Loop 会从 Queue （优先处理 MicroTask Queue）中取出一个 Callback 执行。（由此可以看出，这里使用的术语 Queue ，并不是一个队列数据结构，而是一个 Sets）

  • 每次 Event Loop 执行完成后，都会导致 UI 重新渲染，见这里。

  • 如果 Call Stack 里面执行了大量运算导致其长时间不为空，就是导致回调也会被阻塞。解决方法：Web Workers、child_process。

excalidraw-202031104014 (1)

例子

点击👉🌰