【八股系列】分别说一下nodeJS和浏览器的事件循环机制？

🎉 博客主页：【剑九 六千里-CSDN博客】
🎨 上一篇文章：【CSS伪类和伪元素区别？】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

1. NodeJS

1.1 Node.js 事件循环概念

在 Node.js 中，事件循环由 libuv 库实现，它是跨平台的，可以让 Node.js 高效地处理非阻塞 I/O 操作。

1.2 Node.js 事件循环工作流程

事件循环的工作流程如下：

步骤	描述
1	事件循环开始 (Start)
2	执行同步任务 (Sync Tasks) 并将它们添加到调用栈 (Call Stack)
3	检查宏任务 (Check Macro Tasks) 并将它们添加到宏任务队列 (Macro Tasks Queue)
4	执行宏任务 (Execute Macro Tasks)
5	检查微任务 (Check Micro Tasks) 并将它们添加到微任务队列 (Micro Tasks Queue)
6	执行微任务 (Execute Micro Tasks)
7	再次检查宏任务 (Check Macro Tasks) 并循环执行上述步骤直到所有任务执行完毕
8	事件循环结束 (End)

1.3 Node.js 事件循环示例

console.log('Start');

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

setImmediate(() => {
    console.log('setImmediate');
});

Promise.resolve().then(() => {
    console.log('Promise');
});

process.nextTick(() => {
    console.log('nextTick');
});

console.log('End');

// 输出:
// Start
// End
// nextTick
// Promise
// setTimeout
// setImmediate

2. 浏览器

2.1 浏览器事件循环概念

在浏览器中，事件循环由 JavaScript 引擎（如 V8）和 Web APIs 共同实现。

2.2 浏览器事件循环工作流程

事件循环的工作流程与 Node.js 类似，但有一些细节有所不同：

步骤	描述
1	事件循环开始 (Start)
2	执行同步任务 (Sync Tasks) 并将它们添加到调用栈 (Call Stack)
3	检查宏任务 (Check Macro Tasks) 并将它们添加到宏任务队列 (Macro Tasks Queue)
4	执行宏任务 (Execute Macro Tasks)
5	检查微任务 (Check Micro Tasks) 并将它们添加到微任务队列 (Micro Tasks Queue)
6	执行微任务 (Execute Micro Tasks)
7	再次检查宏任务 (Check Macro Tasks) 并循环执行上述步骤直到所有任务执行完毕
8	事件循环检查是否有任何 Web APIs 任务需要执行 (如 DOM 事件、fetch 请求)
9	如果有 Web APIs 任务需要执行，将它们添加到任务队列 (Task Queue) 并执行
10	事件循环检查是否有任何 I/O 操作完成
11	如果有 I/O 操作完成，将它们添加到任务队列 (Task Queue) 并执行
12	事件循环检查是否有任何 setImmediate 任务需要执行
13	如果有 setImmediate 任务需要执行，将它们添加到任务队列 (Task Queue) 并执行
14	事件循环检查是否有任何任务需要执行 (包括宏任务、微任务、Web APIs 任务、I/O 操作完成的任务、setImmediate 任务)
15	如果有任务需要执行，将它们从任务队列中取出并执行
16	事件循环结束 (End)

2.3 浏览器事件循环示例

console.log('Start');

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

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded');
});

Promise.resolve().then(() => {
    console.log('Promise');
});

requestAnimationFrame(() => {
    console.log('requestAnimationFrame');
});

console.log('End');

// 输出:
// Start
// End
// Promise
// requestAnimationFrame
// DOMContentLoaded
// setTimeout