面试题之浏览器事件环 eventLoop

首先冲一道简单的面试题开始我们本篇的讲解之旅

//请问执行顺序是怎么样的  为什么
console.log(1)

setTimeout(()=>{
    console.log(2)
    Promise.resolve().then(()=>{
        console.log(3)
    })
    
})

setTimeout(()=>{
    console.log(4)
    Promise.resolve().then(()=>{
        console.log(5)
    })
})
Promise.resolve().then(()=>{
    console.log(6)
})

执行顺序如果你不是很清楚浏览器的事件环你可能会答错，但是再初级的前端拿上这段代码也可以在浏览器里执行一下 就知道了他的顺序

执行的顺序是 1，6，2，3，4，5

我简单的画了一张图 首先中间的事我们的js主线程 。

会把要执行的js代码 按顺序放入主线程中 执行的顺序是 同步代码->异步代码 按顺序执行

我们看到这四个只有第一个是同步代码

所以第1 个结果就是1 然后 就是异步代码

我们看到这四个钟公三个是异步代码 而 异步代码里边分 宏任务 和微任务
那么什么是宏任务 什么是微任务呢 我们只需要记住几个微任务和宏任务的 名字

宏任务  script ，ajax ， 事件，requestFrameAnimation， setTimeout ，setInterval ，setImmediate （ie下），MessageChannel



微任务  promise.then ，MutationObserver

微任务特别少 一般我们用到的只有promise.then

异步代码中 微任务的栈 清空了 才去执行宏任务
所以 第二个结果就出来了 就是 6

那么 我们就 来到了第三部 清空 宏任务

在清空宏任务的过程中 又产生了一个微任务 需要把 宏任务产生的微任务 的栈执行完 才能继续执行宏任务

所以 执行完 第二个产生了一个微任务 所以 下来的结果 是 2 3

第三个和第二个的模式是一样的。 所以整个流程总结成一句话就是