电子商务学网站建设好吗,做数据图表网站,品牌建设规划品牌意向,网站加图标文章目录 1. NodeJS1.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 中#xff0c;事件循环由 libuv 库… 文章目录 1. NodeJS1.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
// setImmediate2. 浏览器
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
