47. 微任务(MicroTask)引入

//执行延迟队列中的任务 ProcessDelayTask()

if(!keep_running) //如果设置了退出标志，那么直接退出线程循环 break;

} }

这里用到了一个 for 循环，将队列中的任务一一取出，然后执行，这个很好理解。但是其中包含了两种任务队列，除了上述提到的任务队列，还有一个延迟队列，它专门处理诸如setTimeout/setInterval这

样的定时器回调任务。

上述提到的，普通任务队列和延迟队列中的任务，都属于宏任务。

47. 微任务(MicroTask)引入

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

其实引入微任务的初衷是为了解决异步回调的问题。想一想，对于异步回调的处理，有多少种方式？总结起来有两点:

1）将异步回调进行宏任务队列的入队操作。

2）将异步回调放到当前宏任务的末尾。

如果采用第一种方式，那么执行回调的时机应该是在前面所有的宏任务完成之后，倘若现在的任务队列非常长，那么回调迟迟得不到执行，造成应用卡顿。

为了规避这样的问题，V8 引入了第二种方式，这就是微任务的解决方式。在每一个宏任务中定义一个微任务队列，当该宏任务执行完成，会检查其中的微任务队列，如果为空则直接执行下一个宏任务，如果

不为空，则依次执行微任务，执行完成才去执行下一个宏任务。

常见的微任务有MutationObserver、Promise.then(或.reject) 以及以 Promise 为基础开发的其他技术 (比如fetch API), 还包括 V8 的垃圾回收过程。

Ok, 这便是宏任务和微任务的概念，接下来正式介绍JS非常重要的运行机制——EventLoop。

48. 理解EventLoop：浏览器

例子:

console.log('start');

setTimeout(() => { console.log('timeout');

});

Promise.resolve().then(() => { console.log('resolve');

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

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

4）当本次宏任务执行完，检查微任务队列，发现一个Promise.then, 执行

5）接下来进入到下一个宏任务——setTimeout, 执行

因此最后的顺序是:

start end

resolve timeout

这样就带大家直观地感受到了浏览器环境下 EventLoop 的执行流程。不过，这只是其中的一部分情况，接下来我们来做一个更完整的总结。

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