JavaScript EventLoop

老猫-Leo

发布于 2023-12-11 20:55:07

1750

发布于 2023-12-11 20:55:07

文章被收录于专栏：前端大全

EventLoop 即事件循环机制，是指浏览器或 Node 的一种解决 JavaScript 单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

JavaScript 运行机制

所有同步任务都在主线程上执行，形成一个执行栈(Execution Context Stack)。
主线程之外，还存在任务队列(Task Queue)。只要异步任务有了运行结果，就在任务队列之中放置一个事件。
一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。如果有那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步
一个事件循环中有一个或者是多个任务队列

总结：调用栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了。这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取～执行的操作。

EventLoop 事件循环

介绍

主线程从“任务队列”中读取执行事件，这个过程是循环不断的，这个机制被称为事件循环。此机制具体如下：

JavaScript 中有两种异步任务：宏任务(MacroTask)、微任务(MicroTask)。
主线程会不断从任务队列中按顺序取任务执行，每执行完一个任务都会检查『微任务』队列是否为空（执行完一个任务的具体标志是函数执行栈为空），如果不为空则会一次性执行完所有『微任务』。
然后再进入下一个循环去任务队列中取下一个任务执行。

MacroTask 宏任务

script 全部代码、setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有 IE10 支持，具体可见 MDN。）、I/O、UI Rendering。

MicroTask 微任务

Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver（具体使用方式查看这里）

同步任务和异步任务

JavaScript 单线程任务被分为同步任务和异步任务，同步任务会在调用栈中按照顺序等待主线程依次执行。异步任务会在异步任务有了结果后，将注册的回调函数放入任务队列中，等待主线程空闲的时候（调用栈被清空），被读取到栈内等待主线程的执行。

事件循环的进程模型

选择当前要执行的任务队列，选择任务队列中最先进入的任务，如果任务队列为空即 null，则执行跳转到微任务的执行步骤。
将事件循环中的任务设置为当前选择任务
执行任务
将事件循环中当前运行任务设置为 null
将已经运行完成的任务从任务队列中删除
Microtasks 检查步骤，进入微任务检查点。
- 设置微任务检查点标志为 true。
- 当事件循环微任务执行队列不为空时：选择一个最先进入的微任务队列的微任务，将事件循环的微任务设置为当前选择的微任务。
- 运行微任务
- 将已经执行完成的微任务设置为 null
- 移除微任务队列中的当前运行完成的微任务
- 清理 IndexDB 事务
- 设置进入微任务检查点的标志为 false。
更新界面渲染
返回第一步

总结

执行栈在执行完 同步任务 后，查看 执行栈 是否为空，如果为空，就会去检查 微任务队列 是否为空，如果为空的话，就执行 宏任务，否则就一次性执行完 所有微任务。
每次单个 宏任务 执行完毕后，检查 微任务队列 是否为空，如果不为空的话，会按照先入先出的规则全部执行完 微任务 后，设置 微任务队列 为 null，然后再执行宏任务，如此循环。

举个栗子

代码

console.log('script start');

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

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

console.log('script end');

执行结果

script start
script end
promise1
promise2
setTimeout

执行步骤

第一次执行：执行同步代码，将宏任务和微任务划分到各自队列中。
第二次执行：执行宏任务后，检测到 微任务队列 中不为空，执行 Promise1，执行完成 Promise1 后，调用 Promise2.then，放入 微任务队列 中，再执行 Promise2.then。
第三次执行：当 微任务队列 中为空时，执行 宏任务，执行 setTimeout callback，打印日志。
第四次执行：清空任务队列和调用栈

图例

setTimeout(function () {
  console.log('timer1');
  Promise.resolve()
  .then(function () {
    console.log('promise1');
  });
});

setTimeout(function () {
  console.log('timer2');
  Promise.resolve()
  .then(function () {
    console.log('promise2');
  });
});

再举个栗子

// 例子
console.log('script start');

async function async1() {
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2 end');
}

async1();

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

new Promise((resolve) => {
  console.log('Promise');
  resolve();
})
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('script end');

// 结果
script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout


// 只需将 async1 的执行理解为
function async1() {
  return async2().then(() => {
    console.log('async1 end');
  });
}

Sorry, your browser does not support the video tag.

执行步骤如上所示

开始执行
- 首先我们执行同步代码，先打印 script start。
- 再打印 async2 end，将 async2.then 放入微任务队列中。
- 继续执行，将 setTimeout 放入宏任务队列中。
- 再打印 Promise，将 Promise.then 放入微任务队列中。
- 最后打印 script end
执行完成后，检查微任务队列不为空，按照先进先出原则继续执行。
- 执行 async2.then 打印 async1 end
- 执行 Promise.then 打印 promise1，并将 promise1.then 放入微任务队列中。
此时检查微任务队列继续不为空
- 执行 promise1.then 打印 promise2
最后执行宏任务队列中的任务
- 执行 setTimeout，延迟时间到后，将其回调函数放入任务队列中。
执行回调函数
- 打印 setTimeout

习题

题目

console.log('script start');

async function async1() {
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2 end');
}

async1();

setTimeout(function () {
  console.log('setTimeout1');
}, 100);

setTimeout(function () {
  console.log('setTimeout2');
}, 10);

setTimeout(function () {
  console.log('setTimeout3');
}, 0);

setTimeout(function () {
  console.log('setTimeout4');
}, 0);

new Promise((resolve) => {
  console.log('Promise');
  setTimeout(function () {
    console.log('Promise-setTimeout');
  }, 10);
  resolve();
})
  .then(function () {
    setTimeout(function () {
      console.log('promise1-setTimeout');
    }, 10);
    console.log('promise1');
  })
  .then(function () {
    setTimeout(function () {
      console.log('promise2-setTimeout');
    }, 0);
    console.log('promise2');
  });

console.log('script end');

答案

先思考再查看答案哦～

运行结果

script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout3
setTimeout4
promise2-setTimeout
setTimeout2
Promise-setTimeout
promise1-setTimeout
setTimeout1

运行步骤

开始执行
- 首先我们执行同步代码，先打印 script start。
- 再打印 async2 end，将 async2.then 放入微任务队列中。
- 继续执行，将 setTimeout1、setTimeout2、setTimeout3、setTimeout4 依次放入宏任务队列中。
- 再打印 Promise，将 Promise.then 放入微任务队列中，将 Promise-setTimeout 放入宏任务队列中。
- 最后打印 script end
执行完成后，检查微任务队列不为空，按照先进先出原则继续执行。
- 执行 async2.then 打印 async1 end
- 执行 Promise.then 将 promise1-setTimeout 放入宏任务队列中，打印 promise1，并将 promise1.then 放入微任务队列中。
此时检查微任务队列继续不为空
- 执行 promise1.then 将 promise2-setTimeout 放入宏任务队列中，打印 promise2。
最后执行宏任务队列中的任务
- 依次执行【setTimeout1、setTimeout2、setTimeout3、setTimeout4、Promise-setTimeout、promise1-setTimeout、promise2-setTimeout】。
- 等待延迟时间到后，将其回调函数放入任务队列中。
依次执行回调函数
- 打印 setTimeout3
- 打印 setTimeout4
- 打印 promise2-setTimeout
- 打印 setTimeout2
- 打印 Promise-setTimeout
- 打印 promise1-setTimeout
- 打印 setTimeout1