JS执行机制详解

引题

• JS是单线程语言
• Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop（JS执行机制是一样的，但运行机制可能不一样 nodejs中）

解释

1. 为什么JS是单线程？
2. 为什么需要异步？
3. 单线程是如何实现异步的？

一、为什么JS是单线程

1. JS作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM，因此js是单线程，也避免了同时操作同一个DOM的矛盾问题；比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
2. 为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
3. 为了利用多核CPU的计算能力，H5的Web Worker实现的“多线程”实际上指的是“多子线程”，完全受控于主线程，且不允许操作DOM；

二、为什么需要异步

1. 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
2. 如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验

三、单线程是如何实现异步的

是通过事件循环(event loop),理解了event loop机制,就理解了JS的执行机制.
JavaScript语言的设计者意识到，所以他将JavaScript的任务分为两种，在主线程上执行的任务"同步任务"，被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。

1. 任务队列

任务队列就是一个事件队列，其中最重要的是异步任务事件和定时事件。

• 异步任务事件：一般我们绑定一个事件，比如点击事件等等，都是在某一个时刻才触发执行的，这个时候就得放到任务队列里面，等待执行，而在某个DOM节点上绑定了事件，就要有相应的回调函数,它们是相辅相成的。
  所谓回调函数，就是那些被挂载起来，等待执行的代码，主线程执行任务队列里面的异步任务，其实就是执行这些回调函数。
• 定时事件：setInterval 和 setTimeout

2. 同步任务和异步任务

• 同步任务(synchronous)：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
• 异步任务(asynchronous)：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。 (异步任务事件，定时事件，页面渲染请求图片获取异步资源等)
  异步执行机制如下：
  • 所有同步任务都在主线程上执行，形成一个执行栈。
  • 主线程之外，还有一个“任务队列”,只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。
  • 一旦“执行栈”中的所有同步任务执行完毕了，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
  • 主线程不断重复上面的三步。（事件循环）

3. 宏任务和微任务

不同类型的任务会进入不同的Event Queue，有宏任务的队列和微任务的队列。
这里需要注意的是new Promise是会进入到主线程中立刻执行，而promise.then则属于微任务。
事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后——开始第一轮循环执行完所有微任务——下一轮宏任务…

• 宏任务(macro-task)：整体代码script、setTimeOut、setInterval
• 微任务(mincro-task)：promise.then、process.nextTick(node)

4. Event Loop

综合以上事件循环步骤如下：

1. 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；
2. 同步任务会直接进入主线程依次执行；
3. 异步任务会再分为宏任务和微任务；
4. 宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
5. 微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
6. 当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；
7. 上述过程会不断重复，这就是Event Loop事件循环；

5. 事例代码

一、例子1

console.log(1)

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

console.log(4)

执行结果：
// 1 4 2 3

分析：

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

二、例子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

三、例子3

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

四、例子4

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

五、例子5

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

参考文章

1. JavaScript 运行机制详解：再谈Event Loop
2. 深入理解JS引擎的执行机制
3. js运行机制详解（Event Loop）
4. 这一次，彻底弄懂 JavaScript 执行机制