浏览器中宏队列，微队列以及他们的执行顺序！(浏览器Event Loop)

下面介绍概念：

1. 宏队列（macrotask，也叫tasks ）        

•  setTimeout
•  setInterval 
• setImmediate (Node独有) 
• requestAnimationFrame (浏览器独有) 
• I/O UI rendering (浏览器独有)。      
  

  2. 微队列microtask，也叫jobs。 另一些异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括 ：

• process.nextTick (Node独有) 
• Promise 
• Object.observe 
• MutationObserve 

js执行时共分为三个部分：js执行栈；宏队列；微队列

看过了几篇文章中对于js执行机制顺序的解读，做了如下总结

1. 首先js会执行非异步操作的执行栈中的任务；
2. 执行栈中所有任务全部执行完毕后会在宏队列(宏队列中的任务执行先进先出策略)中取出队列顶部的任务放到执行栈中；
3. 在执行当前macrotask任务时，如果发现有microtask(微队列)，直接将任务放到微队列(微队列同样执行先进先出策略)中，等待当前宏队列任务执行完毕后执行。
4. 执行完当前栈顶的宏队列任务后，不会接着执行下面的宏队列任务，而是接着执行微队列中的任务，直到所有微队列任务全部执行完毕，再执行下一个宏队列任务。
5. 直到所有宏队列任务执行完毕，微队列任务执行完毕。
   

两个例子进行说明：

console.log(1);
setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => {
        console.log(3)
    })
});
    new Promise((resolve, reject) => {
        console.log(4);
        resolve(5)
    }).then((data) => {
        console.log(data);
    });
    setTimeout(() => {
        console.log(6);
    })
    console.log(7);复制代码

• 1
• 4
• 7
• 5
• 2
• 3
• 6