宏任务 + 微任务 + 浏览器事件环（EventLoop）+ Node.js事件环（EventLoop） ---（面试 99% 会问到）

                                                           

一、宏任务 + 微任务

1.概念

在js的异步代码中又区分”宏任务（MacroTask）"和“微任务（MicroTask）”；

• 宏任务：宏/大的意思，可以理解为比较费时比较慢的任务；
• 微任务：微/小的意思，可以理解为相对没有那么费时，没有那么慢的任务；

2. 常见的宏任务和微任务

宏任务：setTimeout, setInterval, setImmediate(IE独有) ...

微任务：Promise，MutationObserver，process.nextTick(node独有) ...

注意点： 所有的宏任务和微任务都会放到自己的执行队列中，也就是有一个宏任务队列和一个微任务队列；所有放到队列中的任务都采用“ 先进先出原则 ”，也就是多个任务同时满足条件，那么会先执行先放进去的。

二、浏览器事件环（EventLoop）

1.JS是单线程的

Js中的代码都是串行的，前面没有执行完毕后面不能执行；

2.执行顺序 

1. 程序运行会从上至下依次执行所有的同步代码；
2. 在执行的过程中遇到异步代码会将异步代码放到事件循环中；
3. 当所有同步代码都执行完毕后，JS会不断检测事件循环队列中的异步代码是否满足条件；
4. 一旦满足条件就执行满足条件的异步代码

3.完整执行顺序 

1. 从上至下执行所有同步代码；
2. 执行微任务队列中所有代码；
3. 执行宏任务中满足条件代码；
4. 执行微任务队列中所有代码；
5. 执行宏任务中满足条件代码；

     ... ... 

• 注意点：每执行完毕一个宏任务都会立刻检查微任务队列中有没有被清空，如果没有就立即清空；

4.浏览器事件环（EventLoop）完整流程-总结

        浏览器内核是多线程的，这里主要涉及到其中一个线程-js线程，由于js线程是单线程的，所以执行代码是串行的，从上至下依次执行，执行到同步代码，直接执行并处理，执行过程中如果遇到异步代码，会判断当前异步代码是宏任务还是微任务，如果是宏任务，就把当前异步代码放到宏任务队列中去，如果判断当前异步代码是微任务，就放到微任务队列，接着按照上面的规则继续执行，直到执行栈中的所有代码执行完毕，js线程会去检查微任务队列中有没有满足条件的任务，有就处理，接下来，js线程就会切换到宏任务队列，检查是否有满足条件的任务，有就执行（注意：js线程每执行完一个宏任务，就会去检查微任务队列是否有满足条件的任务，有就处理；）；当Node服务器处于高并发时期时，宏任务队列和微任务队列中就会不断的放入任务，js线程就要不断地去检查是否有满足条件的任务需要处理，这种情况下就构成了一个环---即“ EventLoop ”；

5.浏览器事件环-Example 

                                                                      

Example-01

    //1.定义一个宏任务（s1）
    setTimeout(function () {
        console.log("setT