记录下对js事件循环的理解

参考自:
js运行机制详解（Event Loop）
并发模型与事件循环
Tasks, microtasks, queues and schedules
归纳一下自己的理解。

概念:

栈

函数调用形成了一个由若干帧组成的栈

堆

对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

同步任务和异步任务

同步任务在主线程执行，异步任务会添加到执行队列中。

队列

一个 JavaScript 运行时包含了一个待处理消息的消息队列。每一个消息都关联着一个用以处理这个消息的回调函数。

在 事件循环 期间的某个时刻，运行时会从最先进入队列的消息开始处理队列中的消息。被处理的消息会被移出队列，并作为输入参数来调用与之关联的函数。调用一个函数总是会为其创造一个新的栈帧。

函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。

事件循环

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

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

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

宏任务和微任务

没有查到这俩名词的具体出处，目前得到的信息是，宏任务先于微任务执行。宏任务包括整体代码script，setTimeout，setInterval；微任务有Promise，process.nextTick。还有一个觉得挺靠谱的介绍：宿主环境提供的叫宏任务，由语言标准提供的叫微任务，这是算比较标准也算比较好记忆的区分宏任务和微任务了。这两个概念对于理解js事件循环至关重要 ，感谢那些默默奉献的大神们。

Event Table

类似一个注册站，异步任务会被放在这里，监听到满足触发条件后把异步任务的回调注册相应事件队列中。

根据以上概念用下图简单描述js内部结构，方便理解:

实例分析

示例代码来自https://blog.csdn.net/ZD717822023/article/details/97491152里的示例

function add(x, y) {
  console.log(1)
  setTimeout(function() { // timer1
    console.log(2)
  }, 1000)
}
add();

setTimeout(function() { // timer2
  console.log(3)
})

new Promise(function(resolve) {
  console.log(4)
  setTimeout(function() { // timer3
    console.log(5)
  }, 100)
  for(var i = 0; i < 100; i++) {
    i == 99 && resolve()
  }
}).then(function() {
  setTimeout(function() { // timer4
    console.log(6) 
  }, 0)
  console.log(7)
})

console.log(8)
————————————————
版权声明：本文为CSDN博主「ZD717822023」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ZD717822023/article/details/97491152

分析












timer3和timer1的执行也是类似，等到触发条件达成，回调函数进入宏任务队列—>队列中的任务被取出执行进入下一次循环，最后输出的结果为 1，4，8，7，3，6，5，2