javascript运行模式

javascript是一门单线程语言,我们常见理解是从上向下一行一行运行，但是，事实上同步单线程是不能满足我们常见的开发任务需求的。我们还需要异步这样一个功能来满足开发需求。即共有两类，同步任务和异步任务。具体运行如下：

js运行示例

运行示例解释

  • 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
  • 当指定的事情完成时，Event Table会将这个函数移入Event Queue。
  • 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
  • 上述过程会不断重复，也就是常说的Event Loop(事件循环)。

我们不禁要问了，那怎么知道主线程执行栈为空啊？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

setTimeOut

1
2
3
4
5
6

setTimeout(() => {
    task()
},3000)

sleep(10000000)

说明

  • task()进入Event Table并注册,计时开始。
  • 执行sleep函数，很慢，非常慢，计时仍在继续。
  • 3秒到了，计时事件timeout完成，task()进入Event Queue，但是sleep也太慢了吧，还没执行完，只好等着。
  • sleep终于执行完了，task()终于从Event Queue进入了主线程执行。

上述的流程走完，我们知道setTimeout这个函数，是经过指定时间后，把要执行的任务(本例中为task())加入到Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于3秒。

setInterval

  • 对于setInterval(fn,ms)来说，我们已经知道不是每过ms秒会执行一次fn，而是每过ms秒，会有fn进入Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了。

初学javascript我们会使用setInterval做图片轮播，有时候轮播越跑越快就是这么一个原因。

Promise && process.nextTick(callBack)

process.nextTick 在事件循环的下一次调用callback回调函数。

除了广义的同步任务和异步任务，我们对任务有着更精细的定义

  • macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
  • micro-task(微任务)：Promise，process.nextTick

不同的任务类型会进入对应的Event Queue

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。以下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
}).then(function() {
    console.log('then');
})

console.log('console');

即：

  • 这段代码作为宏任务，进入主线程。
  • 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述)
  • 接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。
  • 遇到console.log()，立即执行。
  • 好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。
  • ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行。
  • 结束。

事件循环，宏任务，微任务的关系如图所示： js运行示例

转自https://juejin.im/post/59e85eebf265da430d571f89