浏览器事件环，微任务和宏任务

宏任务

• setTimeout
• setImmediate
• MessageChannel

微任务

• Promise.then
• MutationObserver

浏览器有两个事件队列，分别是宏任务队列和微任务队列。微任务队列就是将属于微任务的异步代码（Promise.then 、 MutationObserve）放入微任务事件队列，宏任务队列就是将属于宏任务的异步代码（setTimeout 、 setImmediate ）放入宏任务事件队列。

浏览器首先会将栈中的同步代码先执行完毕。然后将到时需要执行的微任务和宏任务按照顺序分别放入相应的队列中。

首先将所有微任务队列全部按顺序执行。执行完成之后再查看宏任务队列，如果有，会将宏任务队列中的第一个宏任务拿出来执行，然后在查看一遍是否有微任务队列，如果有将微任务在全部执行一遍，在执行一个宏任务，如此循环。

示例一

Promise.resolve().then(response=>{
    console.log('then1')
})
window.setTimeout(()=>{
    console.log('timeout')
},0)
Promise.resolve().then(response => {
    console.log('then2')
})
//输出结果 then1  then2 timeout

示例二

Promise.resolve().then(response=>{
    console.log('then1')
})
window.setTimeout(()=>{
    console.log('timeout1')
    Promise.resolve().then(response => {
        console.log('then3')
    })
},0)
window.setTimeout(() => {
    console.log('timeout2')
}, 0)
Promise.resolve().then(response => {
    console.log('then2')
})
// then1 then2 timeout1 then3 timeout2