事件循环、宏任务、微任务

*宏任务*：在js中，在主线程上执行的任务叫宏任务，常见的有：

1. 1渲染事件
2. 用户交互事件
3. js脚本
4. 网络请求、文件读写完成事件
5. 延迟事件（定时器）

普通任务队列、延迟队列中的任务都属于宏任务。

为了让这些事件有条不紊的进行，js引擎需要对执行的顺序做一定的安排，v8其实采用是一种队列的方式来存储这些任务，即先进来的先执行。

*微任务*：对于每个宏任务而言，其内部都有一个微任务队列，那为什么要引入微任务？微任务在什么时候执行？

引入微任务的初衷是为了解决异步回调问题，如果把异步回调放在宏任务，会造成卡顿。为了解决这一问题，v8引入微任务，在每一个宏任务中定义一个微任务队列，当该宏任务执行完成，会检查其中的微任务队列，如果为空则执行下一个宏任务，如果不为空，则依次执行微任务，执行完成采取执行下一个宏任务。常见的微任务有：

1. MutationObserver
2. Promise.then(或.reject)以及以Promise为基础开发的其他技术（比如fetch API）
3. v8垃圾回收机制
4. nextTick

事件循环--js运行机制（eventLoop）

例子:

console.log('start');
setTimeout(() => {  console.log('timeout');});
Promise.resolve().then(() => {  console.log('resolve');});
console.log('end');

分析一下:

1）刚开始整个脚本作为一个宏任务来执行，因此先打印start和end

2）setTimeout 作为一个宏任务放入宏任务队列

3）Promise.then作为一个为微任务放入到微任务队列

4）当本次宏任务执行完，检查微任务队列，发现一个Promise.then, 执行5）接下来进入到下一个宏任务——setTimeout, 执行

start
end
resolve
timeout

1）一开始整段脚本作为第一个宏任务执行

2）执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列

3）当前宏任务执行完出队，检查微任务队列，如果有则依次执行，直到微任务队列为空

4）执行浏览器 UI 线程的渲染工作

5）检查是否有Web worker任务，有则执行

6）执行队首新的宏任务，回到2，依此循环，直到宏任务和微任务队列都为空

// 练习
Promise.resolve().then(()=>{  console.log('Promise1')    	     setTimeout(()=>{    console.log('setTimeout2') },0)});
setTimeout(()=>{  console.log('setTimeout1')             		Promise.resolve().then(()=>{    console.log('Promise2')     })},0);
console.log('start');
// start// Promise1// setTimeout1// Promise2// setTimeout2