01前端/JS - 事件循环、任务队列和帧

  • 更新时间：2022-05-07 05:57
  • 创建时间：2019-03-28 16:57

栈、堆和队列

  • 栈：函数调用形成栈
  • 堆：对象的内容分配在堆中
  • 队列：一个 JavaScript 运行时包含了一个待处理的消息队列。在事件循环期间依次处理队列中的消息

事件循环

之所以称之为事件循环，是因为它经常按照类似如下的方式来被实现：

1
2
3
while (queue.waitForMessage()) {
  queue.processNextMessage();
}

如果当前没有任何消息，queue.waitForMessage() 会同步地等待消息到达。

任务队列

任务分为 microtask 和 macrotask。

每次先将 microtask queue 中的任务都处理完，再处理一个 macrotask queue 中的的任务。依次这样循环下去。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<script>
  console.log("main1");
  Promise.resolve().then(() => console.log("micro1"));
  console.log("main2");
  setTimeout(console.log, 0, "macro1");
  console.log("main3");
  Promise.resolve().then(() => {
    console.log("micro2");
    Promise.resolve().then(() => console.log("micro3"));
    setTimeout(console.log, 0, "macro2");
  });
  Promise.resolve().then(() => console.log("micro4"));
  console.log("main4");
  setTimeout(console.log, 0, "macro3");
  console.log("main5");
  /**
    main1
    main2
    main3
    main4
    main5
    micro1
    micro2
    micro4
    micro3
    macro1
    macro3
    macro2
  */
</script>
  • macrotasks: setTimeout, setInterval, setImmediate(Non-standard), I/O, UI rendering
  • microtasks: process.nextTick, Promises, Object.observe(Obsolete), MutationObserver

帧

frame

event-dispatch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  setTimeout(() => {
    console.log("setTimeout1");
  }, 0);
  requestAnimationFrame(() => {
    console.log("rAF1");
  });
  setTimeout(() => {
    console.log("setTimeout2");
  }, 0);
  requestAnimationFrame(() => {
    console.log("rAF2");
  });
  /**
    setTimeout1
    setTimeout2
    rAF1
    rAF2
   */
</script>

参考

帧：