一个 event loop只要存在,就会不断执行下边的步骤

  1. 在 tasks 队列中选择最老的一个task,用户代理可以选择任何 tas k队列,如果没有可选的任务,则跳到下边的 microtasks 步骤。
  2. 将上边选择的 task 设置为正在运行的task。
  3. Run: 运行被选择的 task。
  4. 将 event loop 的 currently running task 变为 null。
  5. 从 task 队列里移除前边运行的task。
  6. Microtasks: 执行 microtasks 任务检查点。(也就是执行 microtasks 队列里的任务)
  7. 更新渲染(Update the rendering)…
  8. 如果这是一个 worker event loop,但是没有任务在 task 队列中,并且 WorkerGlobalScope 对象的 closing 标识为 true,则销毁event loop,中止这些步骤,然后进行定义在 Web workers 章节的 run a worker。
  9. 返回到第一步。

概括 Event Loop 机制

  • event loop 会不断循环的去取 tasks 队列的中最老的一个任务推入栈中执行,并在当次循环里依次执行并清空 microtask 队列里的任务。
  • 执行完 microtask 队列里的任务,有可能会渲染更新。(浏览器很聪明,在一帧以内的多次 dom 变动浏览器不会立即响应,而是会积攒变动以最高60HZ的频率更新视图)

比喻 Event Loop 机制

主线程类似一个加工厂,它只有一条流水线,待执行的任务就是流水线上的原料,只有前一个加工完,后一个才能进行。event loops 就是把原料放上流水线的工人。只要已经放在流水线上的,它们会被依次处理,称为同步任务。一些待处理的原料,工人会按照它们的种类排序,在适当的时机放上流水线,这些称为异步任务。

推荐文章

  1. https://github.com/aooy/blog/issues/5
  2. https://github.com/rhinel/blog-word/issues/4