备战-Event Loop

210 阅读2分钟

进程线程

在整理执行机制之前明确一下这个概念还是挺好的

  • 进程

    进程是 CPU 资源分配的最小单位,通俗来讲就是某一时刻在cpu上运行的那个东西,那么cpu上一次运行多个东西就是我们的多进程实现。

  • 线程

    线程是 CPU 调度的最小单位,线程是一个进程中代码的不同执行路线,我们的进程当然也得分工明确也有很多条不同的路线,那么就由我们的线程实现

Event Loop是什么?

Event Loop(事件循环机制)是我们js代码运行机制,也是前端比较基础且重要的一个点。 一个完整的Event Loop过程是这样的。

看题说话

事件循环机制在不考虑同步异步时是没有引进宏任务和微任务这个概念的。我们整个的js在运行时就是一个宏任务,那么引入了异步不免就是围绕着setTimeoutPromise这一类对象进行的。一般的我们所看到的就是下面这几种。

  • macro-task(宏任务): script, setTimeout, setlnterval
  • micro-task(微任务): Promise, process.nextTick

小编这边以自己的理解稍微描述一下执行过程,那么之后相信碰到这一类考题就不会在出错了咯。

宏任务我们定义到任务队列的一个大单位,我们从宏任务开始找,执行宏任务完毕后在执行与他同级的微任务,然后在执行下一个宏任务。(巴拉巴拉巴拉巴拉都绕进去了我们来看题目)

Promise.resolve().then(()=>{
  Promise.resolve(console.log('Promise1'))
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
})

setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')
  })
},0)

console.log('我是第一个输出嘛?')

不多废话我们直接分析题目

  • 第一层

    我们先列举一下宏任务js整体Promise.then()(之前说过,then方法是异步的)、setTimeout,然后我们执行第一个宏任务内容输出:我是第一个输出嘛?

  • 第二层

    我们进入到第二个宏任务执行其微任务输出:Promise1,碰到setTimeout我们在建立宏任务,那么这个宏任务是排在setTimeout1之后的(这里应该好理解吧,因为setTimeout1先进去的宏任务队列)。然后我们执行下一个宏任务输出:setTimeout1,然后执行它里面的微任务输出:Promise2

  • 第三层

    执行我们的最后一个宏任务输出setTimeout2

总结

虽然任务栈里面肯定是没有层级关系的,但是我们这题这样去理解感觉更加易懂一点。好了一个简短的分享与整理。拜~