从一道题浅谈JavaScript 运行机制

//请写出输出内容
async  function async1() {
  console.log('2 async1 start')
  await async2()
  console.log('6 async1 end') 
}

async  function async2() {
  console.log('3 async2')
}

console.log('1 script start')

setTimeout(function() {
  console.log('8 setTimeout')
}, 0)

async1()

new Promise(function(resolve) {
  console.log('4 promise1')
  resolve()
}).then(function() {
  console.log('7 promise2')
})

console.log('5 script end')

在`Chrome 80`和`node v12`中，正确输出是:
/*
1 script start
2 async1 start
3 async2
4 promise1
5 script end
6 async1 end
7 promise2
undefined
8 setTimeout
*/

分析：

1. console.log('1 script start')是同步任务，直接打印 1 script start
2. setTimeout是异步任务，且是宏任务源，放到宏任务队列中，等待下次Event Loop才会执行；
3. 执行async1()，await之前的代码立即执行，打印2 async1 start，await后面的表达式执行一遍，打印3 async2，await 后面的代码是console.log('6 async1 end') 是微任务源，放到微任务队列中，接着跳出async1函数来执行后面的代码。
4. new Promise是同步任务，直接执行，打印4 promise1
5. Promise.then是微任务，将console.log('7 promise2')放到微任务队列
6. console.log('5 script end')是同步任务，直接执行，打印'5 script end
   7.此时主线程任务执行完毕，检查微任务队列中，此时，微任务中， Promise 队列有的两个任务console.log('6 async1 end') 和console.log('7 promise2')，因此按先后顺序输出 6 async1 end，7 promise2。
7. 微任务执行完毕，第一次循环结束；
8. 第二轮循环依旧从宏任务队列开始。此时宏任务中只有一个 setTimeout，取出直接输出8 setTimeout，至此整个流程结束。

这道题主要考察的是事件循环中函数执行顺序的问题，其中包括async ，await，setTimeout，Promise函数。下面来说一下本题中涉及到的知识点。

Promise和async中的立即执行

• Promise中的异步体现在then和catch中
• Promise中的代码是被当做同步任务立即执行的。
• await出现之前，代码也是立即执行的
• await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。
  因此
  await async2()可以改成以下代码:

return Promise.resolve(async2()).then(res => {
    console.log('6 async1 end')
})

单线程的JS引擎

JS单线程原因：如果多线程，假如有2个线程，同时对一个dom操作，一个删除，另一个编辑，浏览器不能确定dom状态，无法下达2个矛盾的命令，所以，js设计之初就是单线程。
好处：简单，没有线程切换维护开销，省内存。

多线程的浏览器

• JS引擎线程
• 界面渲染线程
• 浏览器事件触发线程
• Http请求线程

浏览器一般至少实现三个常驻线程：JS引擎线程，GUI渲染线程，浏览器事件触发线程。

1. JS引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。
2. GUI渲染线程负责渲染浏览器界面，当界面需要重排、重绘或由于某种操作引发回流时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
3. 事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。
   JS引擎的工作机制是：当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以setTimeout只能等JS引擎空闲才会执行，但死循环是永远不会空闲的，所以setTimeout也永远不会执行

任务队列

首先我们需要明白以下几件事情：

• JS分为同步任务和异步任务
• 同步任务都在主线程上执行，形成一个执行栈
• 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

根据规范，事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合；每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。 setTimeout/Promise 等API便是任务源，而进入任务队列的是他们指定的具体执行任务。

任务队列

宏任务

(macro)task（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程如下：

(macro)task->渲染->(macro)task->...

(macro)task主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

微任务

microtask（又称为微任务），可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

microtask主要包含：Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

流程图如下：

代码示例

1.第一个例子

console.log(1)

setTimeout(function(){
  console.log(2)
},0)

console.log(3)

执行结果：
// 1 3 2

分析：
1.console.log(1)是同步任务，直接打印1；
2.setTimeout是异步任务，且是宏函数，放到宏函数队列中，等待下次Event Loop才会执行；
3.console.log(3)是同步任务，直接打印3；
4.主线程执行完毕，没有微任务，那么执行第二个宏任务setTimeout，打印2；
5.结果：1，3，2

2.第二个例子

setTimeout(function(){
    console.log(1)
});

new Promise(function(resolve){
    console.log(2);
    for(var i = 0; i < 10000; i++){
        i == 9999 && resolve();
    }
}).then(function(){
    console.log(3)
});

console.log(4);

执行结果：
// 2， 4， 3， 1

分析：
1.setTimeout是异步，且是宏函数，放到宏函数队列中；
2.new Promise是同步任务，直接执行，打印2，并执行for循环；
3.promise.then是微任务，放到微任务队列中；
4.console.log(4)同步任务，直接执行，打印4；
5.此时主线程任务执行完毕，检查微任务队列中，有promise.then，执行微任务，打印3；
6.微任务执行完毕，第一次循环结束；从宏任务队列中取出第一个宏任务到主线程执行，打印1；
7.结果：2，4，3，1

第三个例子

console.log(1);

setTimeout(function() {
  console.log(2);
}, 0);

Promise.resolve().then(function() {
  console.log(3);
}).then(function() {
  console.log('4.我是新增的微任务');
});

console.log(5);

执行结果：
// 1，5，3，4.我是新增的微任务，2

分析：
1.console.log(1)是同步任务，直接执行，打印1；
2.setTimeout是异步，且是宏函数，放到宏函数队列中；
3.Promise.resolve().then是微任务，放到微任务队列中；
4.console.log(5)是同步任务，直接执行，打印5；
5.此时主线程任务执行完毕，检查微任务队列中，有Promise.resolve().then，执行微任务，打印3；
6.此时发现第二个.then任务，属于微任务，添加到微任务队列，并执行，打印4.我是新增的微任务；
7.这里强调一下，微任务执行过程中，发现新的微任务，会把这个新的微任务添加到队列中，微任务队列依次执行完毕后，才会执行下一个循环；
8.微任务执行完毕，第一次循环结束；取出宏任务队列中的第一个宏任务setTimeout到主线程执行，打印2；
9.结果：1，5，3，4.我是新增的微任务，2

第四个例子

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)

执行结果
//1，4，8，7，3，6，5，2

分析：
1.add()是同步任务，直接执行，打印1；
2.add()里面的setTimeout是异步任务且宏函数，记做timer1放到宏函数队列；
3.add()下面的setTimeout是异步任务且宏函数，记做timer2放到宏函数队列；
4.new Promise是同步任务，直接执行，打印4；
5.Promise里面的setTimeout是异步任务且宏函数，记做timer3放到宏函数队列；
6.Promise里面的for循环，同步任务，执行代码；
7.Promise.then是微任务，放到微任务队列；
8.console.log(8)是同步任务，直接执行，打印8；
9.此时主线程任务执行完毕，检查微任务队列中，有Promise.then，执行微任务，发现有setTimeout是异步任务且宏函数，记做timer4放到宏函数队列；
10.微任务队列中的console.log(7)是同步任务，直接执行，打印7；
11.微任务执行完毕，第一次循环结束；
12.检查宏任务Event Table，里面有timer1、timer2、timer3、timer4，四个定时器宏任务，按照定时器延迟时间得到可以执行的顺序，即Event Queue：timer2、timer4、timer3、timer1，取出排在第一个的timer2；
13.取出timer2执行，console.log(3)同步任务，直接执行，打印3；
14.没有微任务，第二次Event Loop结束；
15.取出timer4执行，console.log(6)同步任务，直接执行，打印6；
16.没有微任务，第三次Event Loop结束；
17.取出timer3执行，console.log(5)同步任务，直接执行，打印5；
18.没有微任务，第四次Event Loop结束；
19.取出timer1执行，console.log(2)同步任务，直接执行，打印2；
20.没有微任务，也没有宏任务，第五次Event Loop结束；
21.结果：1，4，8，7，3，6，5，2

第五个例子

setTimeout(function() { // timer1
  console.log(1);
  setTimeout(function() {  // timer3
    console.log(2);
  })
}, 0);
setTimeout(function() {  // timer2
  console.log(3);
}, 0);

执行结果
//1，3，2

分析：
1.第一个setTimeout是异步任务且宏函数，记做timer1放到宏函数队列；
2.第三个setTimeout是异步任务且宏函数，记做timer2放到宏函数队列；
3.没有微任务，第一次Event Loop结束；
4.取出timer1，console.log(1)同步任务，直接执行，打印1；
5.timer1里面的setTimeout是异步任务且宏函数，记做timer3放到宏函数队列；
6.没有微任务，第二次Event Loop结束；
7.取出timer2，console.log(3)同步任务，直接执行，打印3；
8.没有微任务，第三次Event Loop结束；
9.取出timer3，console.log(2)同步任务，直接执行，打印2；
10.没有微任务，也没有宏任务，第四次Event Loop结束；
11.结果：1，3，2