事件循环

一、概念

javaScript是一门单线程语言，在同一个时间只能完成一个任务。如果有多个任务，就必须排队，执行完前面的一个任务，在去执行后面的其它任务。js的代码的执行机制称为事件循环。

javascript 单线程指的是浏览器中负责解释和执行 javascript 代码的只有一个线程，即为 js 引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：

js引擎线程
事件触发线程
定时器触发线程
导步http请求线程
GUI渲染线程

二、异步 & 同步

为了解决js的阻塞问题，js引入了同步和导步的概念。

同步：就是后一个任务要等待前一个任务执行完成才可以执行，同步任务会造成代码阻塞。
导步：每一个任务都有一个或多个回调函数。webapi会在其相应的时机里将回调函数添加进入消息队列中，不直接执行，然后再去执行后面的任务。直至当前同步任务执行完毕后，再把消息队列中的消息添加进入执行栈进行执行。
- 异步任务在浏览器中一般是以下：
  - 网络请求
  - 定时器
  - DOM监听事件、
  - ...

三、什么是执行栈(stack)、堆(heap)、事件队列(task queue)？

1、执行栈

“栈”是一种数据结构，是一种线性表。特点为 LIFO，即先进后出（last in, first out）。

利用数组的 push 和 shift 可以实现压栈和出栈的操作。

2、堆

对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

堆和栈的区别

首先，stack 是有结构的，每个区块按照一定次序存放，可以明确知道每个区块的大小；heap 是没有结构的，数据可以任意存放。因此，
stack 的寻址速度要快于 heap。

其次，每个线程分配一个 stack，每个进程分配一个 heap，也就是说，stack 是线程独占的，heap 是线程共用的。

此外，stack 创建的时候，大小是确定的，数据从超过这个大小，就发生 stack overflow 错误，而 heap 的大小是不确定的，

3、事件队列和事件循环

队列是一种数据结构，也是一种特殊的线性表。特点为 FIFO，即先进先出（first in, first out）

利用数组的 push 和 pop 可实现入队和出队的操作。

事件循环和事件队列的维护是由事件触发线程控制的。

事件触发线程线程同样是由浏览器渲染引擎提供的，它会维护一个事件队列。

js 引擎遇到上文所列的异步任务后，会交个相应的线程去维护异步任务，等待某个时机，然后由事件触发线程将异步任务对应的回调函数加入到事件队列中，事件队列中的函数等待被执行。

js 引擎在执行过程中，遇到同步任务，会将任务直接压入执行栈中执行，当执行栈为空（即 js 引擎线程空闲），事件触发线程会从事件队列中取出一个任务（即异步任务的回调函数）放入执行在栈中执行。

执行完了之后，执行栈再次为空，事件触发线程会重复上一步的操作，再从事件队列中取出一个消息，这种机制就被称为事件循环（Event Loop）机制。

例子代码：

console.log('script start')

setTimeout(() => {
  console.log('timer 1 over')
}, 1000)

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

console.log('script end')

// script start
// script end
// timer 2 over
// timer 1 over


模拟 js 引擎对其执行过程：

第一轮事件循环：

console.log 为同步任务，入栈，打印“script start”。出栈。
setTimeout 为异步任务，入栈，交给定时器触发线程处理（在1秒后加入将回调加入事件队列）。出栈。
setTimeout 为异步任务，入栈，交给定时器触发线程处理（在4ms之内将回调加入事件队列）。出栈。
console.log 为同步任务，入栈，打印"script end"。出栈。

此时，执行栈为空，js 引擎线程空闲。便从事件队列中读取任务，此时队列如下：

第二轮事件循环

js 引擎线程从事件对列中读取 cb2 加入执行栈并执行，打印”time 2 over“。出栈。

第三轮事件循环

js 引擎从事件队列中读取 cb1 加入执行栈中并执行，打印”time 1 over“ 。出栈。

注意点：

上面，timer 2 的延时为 0ms，HTML5标准规定 setTimeout 第二个参数不得小于4（不同浏览器最小值会不一样），不足会自动增加，所以 "timer 2 over" 还是会在 "script end" 之后。

就算延时为0ms,只是 time 2 的回调函数会立即加入事件队列而已，回调的执行还是得等到执行栈为空时执行。

五、宏任务 & 微任务

在 ES6 新增 Promise 处理异步后，js 执行引擎的处理过程又发生了新的变化。

看代码：

console.log('script start')

setTimeout(function() {
    console.log('timer over')
}, 0)

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

console.log('script end')

// script start
// script end
// promise1
// promise2
// timer over

这里又新增了两个新的概念，macrotask （宏任务）和 microtask（微任务）。

所有的任务都划分到宏任务和微任务下：

macrotask: script 主代码块、setTimeout、setInterval、requestAnimationFrame、node 中的setimmediate 等。
microtask: Promise.then catch finally、MutationObserver、node 中的process.nextTick 等。

js 引擎首先执行主代码块。

执行栈每次执行的代码就是一个宏任务，包括任务队列（宏任务队列）中的。执行栈中的任务执行完毕后，js 引擎会从宏任务队列中去添加任务到执行栈中，即同样是事件循环的机制。

当在执行宏任务遇到微任务 Promise.then 时，会创建一个微任务，并加入到微任务队列中的队尾。

微任务是在宏任务执行的时候创建的，而在下一个宏任务执行之前，浏览器会对页面重新渲染（task >> render >> task（任务队列中读取））。同时，在上一个宏任务执行完成后，页面渲染之前，会执行当前微任务队列中的所有微任务。

所以上述代码的执行过程就可以解释了。

js 引擎执行 promise.then 时，promise1、promise2 被认为是两个微任务按照代码的先后顺序被加入到微任务队列中，script end执行后，栈空。

此时当前宏任务（script 主代码块）执行完毕，并不从当前宏任务队列中读取任务。而是立马清空当前宏任务所产生的微任务队列。将两个微任务依次放入执行栈中执行。执行完毕，打印 promise1、promise2。栈空。此时，第一轮事件循环结束。

紧接着，再去读取宏任务队列中的任务，time over 被打印。栈空。

因此，宏任务和微任务的执行机制如下：

执行一个宏任务（栈中没有就从宏任务队列中获取）
执行过程中遇到微任务，就将它添加到微任务的任务队列中
宏任务执行完毕，立即执行当前微任务队列中的所有微任务（依次执行）
当前所有微任务执行完毕后，开始检查渲染，GUI 线程接管渲染
渲染完毕后，JS 引擎继续开始下一个宏任务，从宏任务队列中获取

async & await

因为,async 和 await 本质上还是基于 Promise 的封装，而 Promise 是属于微任务的一种。所以使用 await 关键字与 Promise.then 效果类似：

setTimeout(_ => console.log(4))

async function main() {
  console.log(1)
  await Promise.resolve()
  console.log(3)
}

main()

console.log(2)
// 1
// 2
// 3
// 4

async 函数在 await 之前的代码都是同步执行的，可以理解为 await 之前的代码都属于 new Promise 时传入的代码，await 之后的所有代码都是 Promise.then 中的回调，即在微任务队列中。

posted @ 2021-10-20 19:34 lucky1010 阅读(112) 评论(0) 收藏举报

刷新页面返回顶部

lucky1010