再探js执行机制

Author Avatar
FanShen 2月 24, 2020

写在前面

入行前端已两年有余了。之前我在一篇文章中写了——要明白前端领域的变与不变。现在和两年前一样,各种框架层出不穷,让人眼花缭乱。很多时候我也在问自己『这个还需要学吗』。这样很容易让我产生焦虑感。而且在面对新事物时,我经常会感到手足无措。归根结底还是基础知识不扎实,内功不够。这也是我写这篇文章的目的——提升内功,更好的理解『变与不变』。

要开始了

先从这段代码开始探索之旅吧

console.log('开始了')

// setTimeout1
setTimeout(function () {
  console.log('timeout1')
  // promise1
  new Promise(function (resolve) {
    console.log('timeout1_promise')
    resolve()
  }).then(function () {
    console.log('timeout1_then')
  })
}, 2000)

for (var i = 1; i <= 5; i++) {
  // setTimeout2
  setTimeout(function () {
    console.log(i)
  }, i * 1000)
  console.log(i)
}

// promise2
new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('then1')
})

// setTimeout3
setTimeout(function () {
  console.log('timeout2')
  // promise3
  new Promise(function (resolve) {
    console.log('timeout2_promise')
    resolve()
  }).then(function () {
    console.log('timeout2_then')
  })
}, 1000)

// promise4
new Promise(function (resolve) {
  console.log('promise2')
  resolve()
}).then(function () {
  console.log('then2')
})

开始之前,喜欢思考问题的小伙伴可能会有两个问题。javascript为什么被设计为单线程语言,为什么又会有同步任务和异步任务的区分。这两个问题,在这里我就不细述了。感兴趣的同学请看阮老师的这篇文章
现在我们来看一下js大致是怎么执行的。

Event Loop

到底哪些是宏任务,哪些是微任务呢。大体上这样区分。

宏任务(macro-task)

  • script(整体JavaScript代码)
  • setTimeout()
  • setInterval()
  • setImmediate()
  • I/O
  • UI render

微任务(micro-task)

  • promise
  • async/await(同☝)
  • process.nextTick
  • MutationObserver

预备知识已经准备的差不多了,现在我们开始执行上面那段代码。

  • 首先整体script进入主线程,遇到console.log(),立即输出『开始了』
  • 接下来遇到setTimeout,2s后回调函数function()被分发到宏任务Event Queue中(注意这里不是2s后执行),这里标记为setTimeout1
  • 遇到for,直接执行,同理setTimeout中的回调函数被分发到宏任务Event Queue中(这里涉及到闭包的知识),标记为setTimeout2,然后执行console.log,输出『1,2,3,4,5』
  • 遇到promise,new Promise直接执行,输出『promise1』。then被分发到微任务Event Queue中,标记为then1
  • 接下来又遇到了一个setTimeout,1s后回调函数function()被分发到宏任务Event Queue中,标记为setTimeout3
  • 又遇到promise,同理,输出『promise2』,then被分发到微任务Event Queue中,标记为then2

第一轮事件循环的宏任务已经执行完毕。Event Queue中的任务如下表所示

宏任务 微任务
setTimeout1(2s later) then1
setTimeout2(1s later) then2
setTimeout3(1s later)

根据上面的流程图,宏任务执行完后,js引擎的监视进程会检查此时有没有可以执行的微任务。这时后分发到微任务Event Queue的then将被执行。依次输出『then1』,『then2』

第一轮事件循环全部执行完毕。

好了,现在开始第二轮事件循环(1s后)。

  • 遇到setTimeout2,输出『6』,没有可以执行的微任务。执行新的宏任务。
  • 遇到setTimeout3,输出『timout2』,new promise立即执行,输出『timeout2_promise』,then被分发到微任务Event Queue中。标记为then3
    第二轮事件循环的宏任务执行完毕。Event Queue中的任务如下表所示
宏任务 微任务
setTimeout1(1s later) then3
setTimeout2(1s later)

同理,宏任务执行完后。执行此轮的微任务then3。

第二轮事件循环全部执行完毕。

  • 遇到setTimeout1,执行console.log,输出『timeout1』,new promise立即执行,输出『timeout1_promise』,then被分发到微任务Event Queue中。标记为then4
  • 第三轮事件循环宏任务执行完毕,执行此轮的微任务then,输出『timeout1_then』

第三轮事件循环执行完毕。

  • setTimeout2中依次会产生4个宏任务,每隔1s输出一个6

至此,整段代码全部执行结束。

总结:宏任务执行完了,执行该宏任务产生的微任务。如果微任务在执行过程中产生新的微任务,则继续执行微任务。微任务执行完毕后,回到宏任务中开始下一轮循环。

async

node

参考资料