深入理解 JS 事件循环：宏任务与微任务执行顺序及性能优化

一、JS 的单线程模型与异步机制

JavaScript 被设计为单线程语言，仅依靠一个主线程（即执行栈）来串行处理所有任务。这种架构有效规避了多线程环境中复杂的资源同步与竞争问题，但同时也引入了一个核心挑战：如何避免耗时较长的同步操作阻塞整个程序的运行？

为了解决上述问题，JavaScript 将任务划分为两类：

同步代码：由 JavaScript 引擎直接按顺序执行。
异步代码：交由宿主环境（如浏览器或 Node.js）进行异步处理，待完成后回调通知引擎。

二、事件循环的核心组件

1. 执行栈（Call Stack）

用于保存当前正在执行的同步任务的上下文信息。
严格遵循后进先出（LIFO）的数据结构原则。
函数被调用时压入栈顶，执行完毕后从栈中弹出。

2. 任务队列（Task Queue）

宏任务队列（Macrotask Queue）：存放如 setTimeout、setInterval 等异步回调。
微任务队列（Microtask Queue）：存放如 Promise.then、MutationObserver 等异步回调。

3. Web APIs

浏览器提供的异步接口，包括定时器、DOM 事件监听等。
Node.js 环境中的 I/O 操作及文件读写等异步接口。

三、事件循环的执行流程

首先执行同步代码，依次处理执行栈中的任务。
接着处理微任务：
- 当执行栈清空后，引擎会立即检查并执行微任务队列中的所有任务。
- 在执行微任务过程中产生的新微任务会被加入队列，并继续执行直到队列为空。
随后进行视图渲染（仅在浏览器环境中）。
从宏任务队列中取出一个任务放入执行栈进行执行。
重复上述步骤，形成持续的事件循环。

四、任务类型详解

1. 宏任务（Macrotask）

来源	示例
setTimeout/setInterval	`setTimeout(fn, 0)`
I/O 操作	文件读写、网络请求
UI 渲染	（浏览器）
事件回调	`click`, `scroll` 等
setImmediate	（Node.js 特有）

主要特点包括：

每次事件循环迭代仅执行一个宏任务。
其执行优先级低于微任务。

2. 微任务（Microtask）

来源	示例
Promise	`.then()`/`.catch()`
MutationObserver	DOM 变更观察
process.nextTick	（Node.js 特有，优先级最高）

主要特点包括：

在当前宏任务执行结束后立即触发执行。
会持续清空整个微任务队列，包括执行期间新产生的微任务。
其执行优先级高于宏任务。

五、经典执行顺序示例

console.log('1. 同步代码开始');

setTimeout(() => {
    console.log('6. 宏任务1 - setTimeout');
    Promise.resolve().then(() => {
        console.log('7. 微任务3 - Promise');
    });
}, 0);

Promise.resolve().then(() => {
    console.log('3. 微任务1 - Promise');
    return Promise.resolve();
}).then(() => {
    console.log('4. 微任务2 - Promise');
});

console.log('2. 同步代码结束');

// 输出顺序：
// 1. 同步代码开始
// 2. 同步代码结束
// 3. 微任务1 - Promise
// 4. 微任务2 - Promise
// 6. 宏任务1 - setTimeout
// 7. 微任务3 - Promise

六、实际应用场景

1. 定时任务控制

// 动画帧控制
function animate() {
    // 动画逻辑
    requestAnimationFrame(animate); // 比setTimeout更适合动画
}
animate();

// 轮询检查
function poll() {
    fetch('/api/status')
        .then(checkStatus)
        .then(() => setTimeout(poll, 5000));
}

2. Promise 异步流程

function loadData() {
    return fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            // 处理数据
            return processData(data);
        })
        .catch(error => {
            // 错误处理
            console.error(error);
        });
}

3. DOM 事件优化

// 防抖处理高频事件
function debounce(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, arguments), delay);
    };
}

window.addEventListener('scroll', debounce(() => {
    // 处理滚动逻辑
}, 100));

七、常见误区与最佳实践

1. 不要阻塞事件循环

// 错误示范：同步计算阻塞UI
function heavyCalc() {
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
        result += Math.sqrt(i);
    }
    return result;
}

// 正确做法：分片处理
async function chunkedHeavyCalc() {
    let result = 0;
    for (let i = 0; i < 100000000; i += 100000) {
        result += await chunkCalc(i, Math.min(i + 100000, 100000000));
        // 允许浏览器渲染
        await new Promise(resolve => requestAnimationFrame(resolve));
    }
    return result;
}

2. 微任务嵌套陷阱

// 可能导致无限循环
function microtaskLoop() {
    Promise.resolve().then(microtaskLoop);
}
// microtaskLoop(); // 不要这样做！

3. 合理使用任务优先级

// 需要立即执行的任务使用微任务
function urgentTask(callback) {
    Promise.resolve().then(callback);
}

// 不紧急的任务使用宏任务
function backgroundTask(callback) {
    setTimeout(callback, 0);
}

总结

到此这篇关于 JavaScript 事件循环深入讲解及常见误区的文章就介绍到这了，更多相关 JS 事件循环详解内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

JavaScript 事件循环机制详解：从原理到实战优化