微观揭秘：浏览器事件循环机制（Event Loop）背后的运作原理

前端

2023-10-01 05:20:15

在上一篇博文中，我们探讨了浏览器事件循环机制（Event Loop）的概念及其重要性。在本文中，我们将深入挖掘事件循环机制的内部运作原理，并通过一系列示例展示其工作流程。

事件循环机制的运行步骤

事件循环机制的主要功能是协调浏览器中各种任务的执行，它以不断循环的方式运行，其主要步骤如下：

检查任务队列 ：事件循环机制首先检查任务队列中是否有待执行的任务，如果有，则将其取出并执行。任务队列中的任务通常是同步任务，如函数调用、变量声明等。
执行任务 ：当取出任务后，事件循环机制会执行该任务。执行过程中，如果遇到异步任务（如AJAX请求），则将其放入异步任务队列中，同时继续执行其他任务。
检查微任务队列 ：在所有同步任务执行完成后，事件循环机制会检查微任务队列中是否有待执行的任务，如果有，则将其取出并执行。微任务队列中的任务通常是promise的回调函数、MutationObserver回调函数等。
更新渲染树 ：在所有微任务执行完成后，事件循环机制会更新渲染树。渲染树是浏览器用来显示网页内容的数据结构，当网页内容发生变化时，浏览器会更新渲染树以反映这些变化。
绘制页面 ：在渲染树更新完成后，事件循环机制会将渲染树绘制到屏幕上。这是浏览器将网页内容显示给用户的过程。

事件循环机制示例

为了更好地理解事件循环机制的运行方式，让我们来看几个示例：

同步任务示例 ：

console.log('同步任务1');
setTimeout(() => {
  console.log('异步任务1');
}, 0);
console.log('同步任务2');

在这个示例中，首先执行同步任务1，然后将异步任务1放入异步任务队列中。接下来，执行同步任务2。在所有同步任务执行完成后，浏览器会检查微任务队列，发现没有待执行的任务。最后，浏览器更新渲染树并绘制页面。

异步任务示例 ：

setTimeout(() => {
  console.log('异步任务1');
}, 0);
console.log('同步任务1');
Promise.resolve().then(() => {
  console.log('微任务1');
});
console.log('同步任务2');

在这个示例中，首先将异步任务1放入异步任务队列中，然后执行同步任务1。接下来，执行同步任务2。在所有同步任务执行完成后，浏览器会检查微任务队列，发现微任务1待执行，因此执行微任务1。最后，浏览器更新渲染树并绘制页面。

同步任务和异步任务混合示例 ：

console.log('同步任务1');
setTimeout(() => {
  console.log('异步任务1');
}, 0);
Promise.resolve().then(() => {
  console.log('微任务1');
});
console.log('同步任务2');
setTimeout(() => {
  console.log('异步任务2');
}, 0);
console.log('同步任务3');

在这个示例中，首先执行同步任务1，然后将异步任务1和异步任务2放入异步任务队列中。接下来，执行同步任务2。在所有同步任务执行完成后，浏览器会检查微任务队列，发现微任务1待执行，因此执行微任务1。然后，浏览器再次检查异步任务队列，发现异步任务1和异步任务2待执行，因此执行异步任务1和异步任务2。最后，浏览器更新渲染树并绘制页面。