【博学谷学习记录】超强总结，用心分享|前端开发学习日记-16

Event Loop（事件循环）是JavaScript实现异步编程的核心机制，其核心在于通过任务队列和事件循环线程协调同步任务与异步任务的执行顺序，避免主线程阻塞。以下是对其原理的详细解析：

1. JavaScript的单线程特性与阻塞问题

单线程模型：JavaScript的主线程负责执行所有同步代码，同一时间只能处理一个任务。
同步阻塞风险：若遇到耗时操作（如循环、同步I/O），主线程会被占用，导致页面“假死”（无法响应用户交互）。// 示例：同步阻塞document.getElementById('myBtn').onclick = function() { alert(123); // 主线程被占用，其他操作需等待};setTimeout(() => { for (let i = 0; i < 500; i++) console.log(i); // 耗时任务}, 100);

2. Event Loop的解决方案

双线程协作：
主线程：执行同步任务，维护调用栈（Call Stack）。
Event Loop线程：监听任务队列（Task Queue），在主线程空闲时将异步任务推入调用栈。
任务分类：
同步任务：直接进入主线程执行。
异步任务：分为宏任务（Macrotask）和微任务（Microtask）：
宏任务：setTimeout、setInterval、I/O操作、事件绑定等。
微任务：Promise.then、process.nextTick（Node.js）。

3. Event Loop的执行流程

执行同步任务：主线程按顺序执行所有同步代码。
处理微任务队列：
每次主线程空闲时，优先清空当前微任务队列。
若微任务执行中产生新微任务，继续处理直至队列为空。
执行一个宏任务：从宏任务队列中取出第一个任务执行。
循环往复：重复步骤2-3，形成事件循环。

4. 代码执行顺序分析示例1：基础事件循环console.log(1);setTimeout(() => console.log(3), 0); // 宏任务console.log(2);// 输出：1 → 2 → 3

同步任务：1、2直接执行。
宏任务：setTimeout回调进入宏任务队列，主线程空闲后执行。

示例2：微任务优先console.log(1);Promise.resolve().then(() => console.log(2)); // 微任务setTimeout(() => console.log(3), 0); // 宏任务console.log(4);// 输出：1 → 4 → 2 → 3

同步任务：1、4执行。
微任务：Promise.then回调优先执行。
宏任务：最后执行setTimeout回调。

示例3：复杂嵌套console.log(1);setTimeout(() => console.log(2), 0); // 宏任务1new Promise(resolve => { resolve(); console.log(3); // 同步代码}).then(() => console.log(4)); // 微任务setTimeout(() => console.log(5), 0); // 宏任务2// 输出：1 → 3 → 4 → 2 → 5

同步任务：1、3（Promise构造函数内同步代码）。
微任务：.then回调执行。
宏任务：按队列顺序执行setTimeout回调。

5. 关键结论

微任务优先级高于宏任务：每次主线程空闲时，先清空微任务队列，再执行宏任务。
任务队列顺序：宏任务队列（FIFO）和微任务队列（FIFO）独立管理。
避免阻塞：将耗时操作（如网络请求、定时器）拆分为异步任务，利用Event Loop实现非阻塞。

6. 应用场景

优化性能：使用Promise或async/await替代回调地狱，减少主线程压力。
事件驱动：如用户点击事件（onclick）通过宏任务队列异步处理。
Node.js异步I/O：底层通过libuv库实现Event Loop，高效处理高并发。

通过Event Loop机制，JavaScript在单线程环境下实现了高效的异步编程，理解其执行顺序对避免竞态条件、优化代码性能至关重要。

您可能感兴趣问答

Collapsible

热门标签

热点问答