网站是用什么做的中国国家培训网靠谱吗
文章目录
- 1. NodeJS
 - 1.1 Node.js 事件循环概念
 - 1.2 Node.js 事件循环工作流程
 - 1.3 Node.js 事件循环示例
 
- 2. 浏览器
 - 2.1 浏览器事件循环概念
 - 2.2 浏览器事件循环工作流程
 - 2.3 浏览器事件循环示例
 
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
