一、那么宏任务和微任务是什么呢？
首先，我们要先了解下 Js 。js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，也就是假的。那么就产生了同步任务和异步任务。
ES6 规范中，microtask 称为 jobs，macrotask 称为 task 宏任务是由宿主发起的，而微任务由JavaScript自身发起。
在ES3以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。
| s | 宏任务（macrotask） | 微任务（microtask） |
|---|---|---|
| 谁发起的 | 宿主（Node、浏览器） | JS引擎 |
| 具体事件 | 1. script (可以理解为外层同步代码)2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js） | 1. Promise2. MutaionObserver3. Object.observe（已废弃；Proxy 对象替代）4. process.nextTick（Node.js） |
| 谁先运行 | 后运行 | 先运行 |
| 会触发新一轮Tick吗 | 会 | 不会 |
二、宏任务、微任务有哪些？
宏任务：1. script (可以理解为外层同步代码)2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js）
微任务：1. Promise2.process.nextTick（Node.js） 3. Object.observe（已废弃；Proxy 对象替代）4. MutaionObserver
三、宏任务、微任务是怎么执行的？
执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。
这里容易产生一个错误的认识：就是微任务先于宏任务执行。实际上是先执行同步任务，异步任务有宏任务和微任务两种，先将宏任务添加到宏任务队列中，将宏任务里面的微任务添加到微任务队列中。所有同步执行完之后执行异步，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行。之后就一直循环…
四、案例
例一、
1`setTimeout(function(){
2 console.log('1');
3});
4new Promise(function(resolve){
5 console.log('2');
6 resolve();
7}).then(function(){
8 console.log('3');
9}).then(function(){
10console.log('4')
11});
12console.log('5');
13// 2 5 3 4 1`分析：
1.遇到setTimout，异步宏任务，放入宏任务队列中 2.遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2 3.而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中 4.遇到同步任务console.log(‘5’);输出5；主线程中同步任务执行完 5.从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空 6.从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空
例二、
1`setTimeout(()=>{
2 new Promise(resolve =>{
3 resolve();
4 }).then(()=>{
5 console.log('test');
6 });
7
8 console.log(4);
9});
10
11new Promise(resolve => {
12 resolve();
13 console.log(1)
14}).then( () => {
15 console.log(3);
16 Promise.resolve().then(() => {
17 console.log('before timeout');
18 }).then(() => {
19 Promise.resolve().then(() => {
20 console.log('also before timeout')
21 })
22 })
23})
24console.log(2);`解析：
1.遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
2.遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
3.而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中 4.遇到同步任务console.log(2)，输出2；主线程中同步任务执行完 5.从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中； 6.从微任务队列中取出任务a到主线程中，输出 before timeout； 7.从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中； 8.从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空 9.从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空 10.从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空
例三、
1`console.log('1');
2
3setTimeout(function() {
4 console.log('2');
5 process.nextTick(function() {
6 console.log('3');
7 })
8 new Promise(function(resolve) {
9 console.log('4');
10 resolve();
11 }).then(function() {
12 console.log('5')
13 })
14})
15process.nextTick(function() {
16 console.log('6');
17})
18new Promise(function(resolve) {
19 console.log('7');
20 resolve();
21}).then(function() {
22 console.log('8')
23})
24
25setTimeout(function() {
26 console.log('9');
27 process.nextTick(function() {
28 console.log('10');
29 })
30 new Promise(function(resolve) {
31 console.log('11');
32 resolve();
33 }).then(function() {
34 console.log('12')
35 })
36})
37// 1 7 6 8 2 4 3 5 9 11 10 12`