浏览器Event Loop机制-宏任务与微任务

前言

阮一峰一篇文章讲过，Event Loop 是在程序中设置两个线程：一个负责程序本身的运行，称为"主线程"；另一个负责主线程与其他进程（主要是各种I/O操作）的通信，被称为"Event Loop线程"。这也是解释js即使是单线程的，但如果运用好他的Event Loop机制,开发的程序依然能够提供很好的体验效果。

任务分类

如下图左边是宏任务分类，右边是微任务分类。

代码

console.log("start");

setTimeout(() => {
  console.log("setTimeout");
  new Promise(resolve => {
    console.log("promise inner1");
    resolve();
  }).then(() => {
    console.log("promise then1");
  });
}, 0);

new Promise(resolve => {
  console.log("promise inner2");
  resolve();
}).then(() => {
  console.log("promise then2");
});
//输出顺序 
//start
//promise inner2
//promise then2
//setTimeout
//promise inner1
//promise then1

执行顺序

任务执行过程中都有一个任务队列，在任务队列由前到后依次执行。宏任务中不仅可以包含微任务，也能包含宏任务。
1.事例中，首先执行script，代码由上到下依次执行，
2.当script自身宏任务执行完，开始执行script自身微任务，
3.script自身微任务执行完毕，再取任务队列中的宏任务（setTimeout)重复上述执行步骤。

总结

在Event loop中只要清楚当前队列主要执行的任务类型，以及各个函数的任务类型，再做判断其实就很清晰了。