javascript运行机制—消息队列，同步异步，微任务和宏任务

1. 前言

js是单线程，异步、非阻塞、解释型脚本语言；

这边先提三个疑问，带着问题学习。

1. 为啥js要设计成单线程，多线程和多进程效率不是更高吗？
2. 既然js是单线程，怎么处理同步任务和异步任务？
3. 异步又是怎么实现非阻塞的呢？？

2. js为啥是单线程？

在这之前，先来看下线程和进程的概念：

2.1 进程和线程

• 进程：进程是CPU资源分配最小单位（是能拥有资源和独立运行的最小单位）。比如浏览器就是多进程的，每个标签页都是一个独立进程，具体可以去看看浏览器内核相关知识；

• 线程：线程是CPU调度的最小单位。（线程是建立在进程基础上的，一个进程中可以有多个线程）

   提示： 进程和线程之间都可以通信，但是一般进程间通信代价较大，不采用；
  

2.2 js单线程

js作为解释型脚本语言，主要用来和DOM交互，这也是为啥它设计成单线程，如果多线程同时操作一个DOM，那会出现什么样的情况。
为了利用多核CPU的计算能力，HTML5提出了web Worker标准，允许javascript创建多个线程，但是子线程完全受主线程控制，并且子线程不能操作DOM，所以并没有改变JavaScript单线程的本质。

2.2 同步&异步

• 同步任务： 在主线程上排队执行的任务，只有前一个任务执行完毕，后一个任务才会执行；

//同步任务： 输出为a, b
console.log("a");
console.log("b");

• 异步任务：不进入主线程，而是进入任务队列，只有当主线程当前任务执行结束，才会读取任务队列中消息；（一次取完）

//setTimeout()为异步函数，输出为 b, a
setTimeout(()=> {
	console.log("a");
});
console.log("b")'

2.3 任务队列

任务队列，也即上图的消息队列，从图中可以看出，消息队列中存放的一定是异步任务，这些异步任务一定要等到主线程中当前任务执行完毕后才会执行；

1. 如果是异步任务，会先在事件列表中注册函数；
2. 如果事件列表中的事件触发了，会将这个函数移入任务队列中；

2.3 宏任务和微任务

首先，宏任务和微任务都是异步任务；

2.3.1 event loop(事件循环)

为了更好的理解事件循环，我们举个例子： 假如A，B, C, D在排队，突然来了两个军人E/F，当A买完票时，售票员会先给E和F买票，才会再给B买票；相同的道理：当js执行的时候，遇到console.log("HelloWorld")时，会将其打印出来，然后会检查微任务队列中有没有任务，有的话先执行微任务队列，执行完毕后才会继续执行宏任务；

2.3.2 常见宏任务与微任务

宏任务	微任务
setTimeout(), setInterval(), js整体代码	Promise

2.3.3 为什么要用微任务

主要是为了减少更新时的渲染次数，根据HTML标准，每个宏任务结束之后，UI都会重新渲染，但是如果在microtask中就已经完成了数据更新，宏任务结束之后就可以得到最新的UI了，如果没有微任务，就会增加渲染次数；

2.3.4 总结

3 实例

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

new Promise(function(resolve){
   console.log('2');
   resolve();
}).then(function(){
   console.log('3')
});

console.log('4');

输出为：2， 4， 3，1

 TIP: 为了容易辨别起名为p1（p开头 里面打印1）
  process.nextTick(function() {         --------> 被放微任务列表
    console.log('1');                             微任务列表记为：【p1】
  })

  new Promise(function (resolve) {
    console.log('2');                   --------> 直接执行
    resolve();                                    目前打印顺序为：2
  }).then(function () {                 --------> 整体的then被放进微任务列表[包含其中的setTimeout 4]
    console.log('3');                             微任务列表记为：【p1 t34】
    setTimeout(function () {
      console.log('4')
    });
  });

  setTimeout(function () {              --------> 被放宏任务列表
    console.log('5')                              宏任务列表记为：【s5】
  });

  new Promise(function (resolve) {
    setTimeout(function () {            --------> 被放宏任务列表
      console.log('6')                            宏任务列表记为：【s5 s6】
    });
    resolve()
  }).then(function () {                 --------> 整体的then被放进微任务列表[包含其中的setTimeout和其中的多层嵌套]
    setTimeout(function () {                      微任务列表记为：【p1 t34 t789】
      console.log('7')
      new Promise(function (resolve) {
        setTimeout(function () {
          console.log('8')
        });
        resolve()
      }).then(function () {
        setTimeout(function () {
          console.log('9')
        });
      });
    });
  });
  console.log('10')                      --------> 直接执行
                                                   目前打印顺序为：2、10

原文参考：
https://www.jianshu.com/p/b1c537a709ce
https://www.jianshu.com/p/184988903562