❌

阅读视图

发现新文章，点击刷新页面。

🔄记住这张图，脑子跟着浏览器的事件循环（Event Loop）转起来了

✇掘金 前端
vilan_微澜

一、前言

下面按照我的理解，纯手工画了一张在浏览器执行JavaScript代码的Event Loop(事件循环) 流程图。

后文会演示几个例子，把示例代码放到这个流程图演示其执行流程。

当然，这只是简单的事件循环流程，不过，却能让我们快速掌握其原理。

Event Loop.png

二、概念

事件循环是JavaScript为了处理单线程执行代码时，能异步地处理用户交互、网络请求等任务 (异步Web API)，而设计的一套任务调度机制。它就像一个永不停止的循环，不断地检查（结合上图就是不断检查Task Queue和Microtask Queue这两个队列）并需要运行的代码。

三、为什么需要事件循环

JavaScript是单线程的，这意味着它只有一个主线程来执行代码。如果所有任务（比如一个耗时的计算、一个网络请求）都同步执行，那么浏览器就会被卡住，无法响应用户的点击、输入，直到这个任务完成。这会造成极差的用户体验。

事件循环就是为了解决这个问题而生的：它让耗时的操作（如网络请求、文件读取）在后台异步执行，等这些操作完成后，再通过回调的方式来执行相应的代码，从而不阻塞主线程。

四、事件循环流程图用法演示

演示一：小菜一碟

先来一个都是同步代码的小菜，先了解一下前面画的流程图是怎样在调用栈当中执行JavaScript代码的。

console.log(1)

function funcOne() {
  console.log(2)
}

function funcTwo() {
  funcOne()
  console.log(3)
}

funcTwo()

console.log(4)

控制台输出：

1 2 3 4

下图为调用栈执行流程

演示01.png

每执行完一个同步任务会把该任务进行出栈。在这个例子当中每次在控制台输出一次，则进行一次出栈处理，直至全部代码执行完成。

演示二：小试牛刀

setTimeout+Promise组合拳，了解异步代码是如何进入任务队列等待执行的。

console.log(1)

setTimeout(() => {
  console.log('setTimeout', 2)
}, 0)

const promise = new Promise((resolve, reject) => {
  console.log('promise', 3)
  resolve(4)
})

setTimeout(() => {
  console.log('setTimeout', 5)
}, 10)

promise.then(res => {
  console.log('then', res)
})

console.log(6)

控制台输出：

1 promise 3 6 then 4 setTimeout 2 setTimeout 5

流程图执行-步骤一：

先执行同步代码，如遇到异步代码，则把异步回调事件放到后台监听或对应的任务队列。

image.png

  1. 执行console.log(1)，控制台输出1。

  2. 执行定时器，遇到异步代码，后台注册定时器回调事件，时间到了，把回调函数() => {console.log('setTimeout', 2)}，放到宏任务队列等待。

  3. 执行创建Promise实例，并执行其中同步代码：执行console.log('promise', 3),控制台输出promise 3;执行resolve(4)，此时Promise已经确定为完成fulfilled状态，把promise.then()的回调函数响应值设为4。

  4. 执行定时器，遇到异步代码，后台注册定时器回调事件，时间未到，把回调函数() => { console.log('setTimeout', 5) }放到后台监听。

  5. 执行promise.then(res => { console.log('then', res) })，出栈走异步代码，把回调函数4 => { console.log('then', 4) }放入微任务队列等待。

流程图执行-步骤二：

上面已经把同步代码执行完成，并且把对应异步回调事件放到了指定任务队列，接下来开始事件循环。

image.png

  1. 扫描微任务队列，执行4 => { console.log('then', 4) }回调函数，控制台输出then 4。

  2. 微任务队列为空，扫描宏任务队列，执行() => {console.log('setTimeout', 2)}回调函数，控制台输出setTimeout 2。

  3. 每执行完一个宏任务，需要再次扫描微任务队列是否存在可执行任务（假设此时后台定时到了，则会把() => { console.log('setTimeout', 5) }加入到了宏任务队列末尾）。

  4. 微任务队列为空，扫描宏任务队列，执行() => { console.log('setTimeout', 5) }，控制台输出setTimeout 5。

演示三：稍有难度

setTimeout+Promise组合拳+多层嵌套Promise

console.log(1)

setTimeout(() => {
  console.log('setTimeout', 10)
}, 0)

new Promise((resolve, reject) => {
  console.log(2)
  resolve(7)

  new Promise((resolve, reject) => {
    resolve(5)
  }).then(res => {
    console.log(res)

    new Promise((resolve, reject) => {
      resolve('嵌套第三层 Promise')
    }).then(res => {
      console.log(res)
    })
  })

  Promise.resolve(6).then(res => {
    console.log(res)
  })

}).then(res => {
  console.log(res)
})

new Promise((resolve, reject) => {
  console.log(3)

  Promise.resolve(8).then(res => {
    console.log(res)
  })

  resolve(9)
}).then(res => {
  console.log(res)
})

console.log(4)

上一个演示说明了流程图执行的详细步骤，下面就不多加赘叙了，直接看图！

talk is cheap, show me the chart

image.png

上图，调用栈同步代码执行完成，开始事件循环，先看微任务队列，发现不为空，按顺序执行微任务事件：

嵌套02.png

上图，已经把刚才排队的微任务队列全部清空了。但是在执行第一个微任务时，发现还有嵌套微任务，则把该任务放到微任务队列末尾，然后接着一起执行完所有新增任务。

嵌套03.png

最后微任务清空后，接着执行宏任务。到此全部事件已执行完毕！

控制台完整输出顺序：

1 2 3 4 5 6 7 8 9 10

演示四：setTimeout伪定时

setTimeout并不是设置的定时到了就马上执行，而是把定时回调放在task queue任务队列当中进行等待，待主线程调用栈中的同步任务执行完成后空闲时才会执行。

const startTime = Date.now()
setTimeout(() => {
  const endTime = Date.now()
  console.log('setTimeout cost time', endTime - startTime)
  // setTimeout cost time 2314
}, 100)

for (let i = 0; i < 300000; i++) {
  // 模拟执行耗时同步任务
  console.log(i)
}

控制台输出：

1 2 3 ··· 300000 setTimeout cost time 2314

下图演示了其执行流程：

setTimeout假延时.png

演示五：fetch网络请求和setTimeout

获取网络数据，fetch回调函数属于微任务，优于setTimeout先执行。

setTimeout(() => {
  console.log('setTimeout', 2)
}, 510)

const startTime = Date.now()
fetch('http://localhost:3000/test').then(res => {
  const endTime = Date.now()
  console.log('fetch cost time', endTime - startTime)
  return res.json()
}).then(data => {
  console.log('data', data)
})

下图当前Call Stack执行栈执行完同步代码后，由于fetch和setTimeout都是宏任务，所以走宏任务Web API流程后注册这两个事件回调，等待定时到后了，由于定时回调是个普通的同步函数，所以放到宏任务队列；等待fetch拿到服务器响应数据后，由于fetch回调为一个Promise对象，所以放到微任务队列。

fetch.png

经过多番刷新网页测试，下图控制台打印展示了setTimeout延时为510ms，fetch请求响应同样是510ms的情况下，.then(data => { console.log('data', data) })先执行了，也是由于fetch基于Promise实现，所以其回调为微任务。

b475cbb38b0161d3e7f5f97b45824b31.png

五、结语

这可能只是简单的JavaScript代码执行事件循环流程，目的也是让大家更直观理解其中原理。实际执行过程可能还会读取堆内存获取引用类型数据、操作dom的方法，可能还会触发页面的重排、重绘等过程、异步文件读取和写入操作、fetch发起网络请求，与服务器建立连接获取网络数据等情况。

但是，它们异步执行的回调函数都会经过图中的这个事件循环过程，从而构成完整的浏览器事件循环。

❌