JavaScript 事件循環(huán)宏任務(wù)與微任務(wù)實(shí)例詳解

更新時(shí)間：2025年11月24日 10:09:46 作者：|晴天|

本文解析了JavaScript事件循環(huán)機(jī)制,重點(diǎn)講解了宏任務(wù)（MacroTasks）和微任務(wù)（MicroTasks）的區(qū)別、執(zhí)行順序及其實(shí)際應(yīng)用,通過理解事件循環(huán),可以編寫更高效、可靠的異步代碼,優(yōu)化性能,避免阻塞用戶界面,感興趣的朋友跟隨小編一起看看吧

JavaScript 作為一門單線程語言，卻能高效處理異步操作，這得益于其精巧的事件循環(huán)機(jī)制。理解事件循環(huán)中的宏任務(wù)和微任務(wù)是掌握 JavaScript 異步編程的關(guān)鍵。本文將深入解析這兩者的區(qū)別、執(zhí)行順序和實(shí)際應(yīng)用。

為什么需要事件循環(huán)？

JavaScript 設(shè)計(jì)之初主要用于瀏覽器交互，如果采用多線程會(huì)帶來復(fù)雜的同步問題（如 DOM 操作沖突）。因此，JavaScript 使用單線程 + 事件循環(huán)的方案：

單線程：避免復(fù)雜的線程同步問題
事件循環(huán)：通過任務(wù)隊(duì)列處理異步操作，不阻塞主線程

事件循環(huán)的基本原理

事件循環(huán)的核心可以簡(jiǎn)化為以下流程：

1. 執(zhí)行同步代碼（調(diào)用棧）

2. 檢查微任務(wù)隊(duì)列，執(zhí)行所有微任務(wù)

3. 檢查宏任務(wù)隊(duì)列，取出第一個(gè)執(zhí)行

4. 重復(fù)步驟1-3

宏任務(wù) vs 微任務(wù)

宏任務(wù)（Macro Tasks）

宏任務(wù)代表離散的、獨(dú)立的工作單元。常見的宏任務(wù)包括：

// 宏任務(wù)示例
setTimeout(() => {
  console.log('setTimeout - 宏任務(wù)');
}, 0);
setInterval(() => {
  console.log('setInterval - 宏任務(wù)');
}, 1000);
// I/O 操作
fs.readFile('file.txt', (err, data) => {
  console.log('I/O 操作 - 宏任務(wù)');
});
// UI 渲染（瀏覽器）
// 頁面渲染本身也是一個(gè)宏任務(wù)

微任務(wù)（Micro Tasks）

微任務(wù)通常是在當(dāng)前任務(wù)執(zhí)行結(jié)束后立即執(zhí)行的任務(wù)。常見的微任務(wù)包括：

// Promise - 微任務(wù)
Promise.resolve().then(() => {
  console.log('Promise.then - 微任務(wù)');
});
// MutationObserver - 微任務(wù)
const observer = new MutationObserver(() => {
  console.log('DOM 變化 - 微任務(wù)');
});
// process.nextTick (Node.js) - 微任務(wù)
process.nextTick(() => {
  console.log('process.nextTick - 微任務(wù)');
});
// queueMicrotask API
queueMicrotask(() => {
  console.log('queueMicrotask - 微任務(wù)');
});

執(zhí)行順序詳解

讓我們通過代碼示例來理解執(zhí)行順序：

console.log('1. 同步代碼開始');
setTimeout(() => {
  console.log('6. setTimeout - 宏任務(wù)');
}, 0);
Promise.resolve().then(() => {
  console.log('4. Promise 1 - 微任務(wù)');
}).then(() => {
  console.log('5. Promise 2 - 微任務(wù)');
});
queueMicrotask(() => {
  console.log('3. queueMicrotask - 微任務(wù)');
});
console.log('2. 同步代碼結(jié)束');
// 執(zhí)行結(jié)果：
// 1. 同步代碼開始
// 2. 同步代碼結(jié)束
// 3. queueMicrotask - 微任務(wù)
// 4. Promise 1 - 微任務(wù)
// 5. Promise 2 - 微任務(wù)
// 6. setTimeout - 宏任務(wù)

更復(fù)雜的例子

console.log('腳本開始');
setTimeout(() => {
  console.log('setTimeout 1');
  Promise.resolve().then(() => {
    console.log('Promise in setTimeout');
  });
}, 0);
Promise.resolve().then(() => {
  console.log('Promise 1');
  return Promise.resolve();
}).then(() => {
  console.log('Promise 2');
  setTimeout(() => {
    console.log('setTimeout in Promise');
  }, 0);
});
console.log('腳本結(jié)束');
// 執(zhí)行結(jié)果：
// 腳本開始
// 腳本結(jié)束
// Promise 1
// Promise 2
// setTimeout 1
// Promise in setTimeout
// setTimeout in Promise

事件循環(huán)的完整流程

更詳細(xì)的事件循環(huán)流程如下：

1. 執(zhí)行同步代碼直到調(diào)用棧清空

2. 執(zhí)行所有微任務(wù)直到微任務(wù)隊(duì)列清空

3. 如有需要，執(zhí)行 UI 渲染（瀏覽器）

4. 從宏任務(wù)隊(duì)列中取出一個(gè)任務(wù)執(zhí)行

5. 回到步驟1，開始新一輪循環(huán)

可視化流程

[同步代碼] → [微任務(wù)隊(duì)列] → [渲染] → [宏任務(wù)隊(duì)列]
↓ ↓ ↓ ↓
執(zhí)行全部執(zhí)行可能執(zhí)行取一個(gè)執(zhí)行

實(shí)際應(yīng)用場(chǎng)景

1. 優(yōu)化性能 - 批量 DOM 更新

// 不好的做法：可能導(dǎo)致多次重排
function updateMultipleElements() {
  element1.style.color = 'red';
  element2.style.color = 'blue';
  element3.style.color = 'green';
}
// 好的做法：使用微任務(wù)批量更新
function updateMultipleElementsOptimized() {
  queueMicrotask(() => {
    element1.style.color = 'red';
    element2.style.color = 'blue';
    element3.style.color = 'green';
  });
}

2. 確保代碼在當(dāng)前任務(wù)結(jié)束后執(zhí)行

// 在狀態(tài)更新后執(zhí)行某些操作
let state = { count: 0 };
function updateState(newCount) {
  state.count = newCount;
  // 使用微任務(wù)確保在狀態(tài)更新后執(zhí)行
  Promise.resolve().then(() => {
    console.log('狀態(tài)已更新:', state.count);
    updateUI();
  });
}

3. 處理用戶輸入

// 確保在處理用戶輸入前完成所有微任務(wù)
button.addEventListener('click', () => {
  // 同步代碼
  console.log('按鈕被點(diǎn)擊');
  // 微任務(wù) - 在渲染前執(zhí)行
  Promise.resolve().then(() => {
    console.log('處理點(diǎn)擊的微任務(wù)');
  });
  // 宏任務(wù) - 在渲染后執(zhí)行
  setTimeout(() => {
    console.log('處理點(diǎn)擊的宏任務(wù)');
  }, 0);
});

常見陷阱與最佳實(shí)踐

1. 避免微任務(wù)無限循環(huán)

// 錯(cuò)誤示例：會(huì)導(dǎo)致微任務(wù)無限循環(huán)
function infiniteMicrotask() {
  Promise.resolve().then(() => {
    console.log('微任務(wù)執(zhí)行');
    infiniteMicrotask(); // 遞歸調(diào)用
  });
}
// 正確做法：使用宏任務(wù)打破循環(huán)
function safeRecursiveTask() {
  Promise.resolve().then(() => {
    console.log('微任務(wù)執(zhí)行');
    // 使用 setTimeout 讓出控制權(quán)
    setTimeout(safeRecursiveTask, 0);
  });
}

2. 理解不同環(huán)境的差異

// Node.js 與瀏覽器的微任務(wù)優(yōu)先級(jí)差異
console.log('start');
Promise.resolve().then(() => {
  console.log('Promise');
});
process.nextTick(() => {
  console.log('nextTick');
});
console.log('end');
// Node.js 輸出：
// start
// end
// nextTick
// Promise
// 瀏覽器輸出（無 process.nextTick）：
// start
// end
// Promise

3. 合理選擇任務(wù)類型

// 根據(jù)場(chǎng)景選擇任務(wù)類型：
// 緊急的、需要立即執(zhí)行的任務(wù) - 使用微任務(wù)
function urgentTask() {
  queueMicrotask(() => {
    // 立即執(zhí)行但不在當(dāng)前調(diào)用棧
  });
}
// 不緊急的、可以延遲的任務(wù) - 使用宏任務(wù)
function lazyTask() {
  setTimeout(() => {
    // 可以等待的任務(wù)
  }, 0);
}
// 需要讓瀏覽器渲染的任務(wù) - 使用宏任務(wù)
function renderTask() {
  setTimeout(() => {
    // 確保 UI 有機(jī)會(huì)更新
  }, 0);
}

調(diào)試技巧

1. 使用 console 跟蹤執(zhí)行順序

console.log('同步 1');
setTimeout(() => console.log('宏任務(wù) 1'), 0);
Promise.resolve()
  .then(() => console.log('微任務(wù) 1'))
  .then(() => console.log('微任務(wù) 2'));
console.log('同步 2');

2. 使用 Performance API 分析

// 標(biāo)記任務(wù)執(zhí)行時(shí)間
performance.mark('task-start');
// 執(zhí)行一些操作
doSomeWork();
performance.mark('task-end');
performance.measure('task-duration', 'task-start', 'task-end');

總結(jié)

理解 JavaScript 事件循環(huán)中的宏任務(wù)和微任務(wù)對(duì)于編寫高效、可靠的異步代碼至關(guān)重要：

微任務(wù)在當(dāng)前任務(wù)結(jié)束后立即執(zhí)行，優(yōu)先級(jí)高于宏任務(wù)
宏任務(wù)在每次事件循環(huán)中執(zhí)行一個(gè)，讓瀏覽器有機(jī)會(huì)進(jìn)行渲染
合理的任務(wù)調(diào)度可以優(yōu)化性能，避免阻塞用戶界面
掌握?qǐng)?zhí)行順序有助于調(diào)試復(fù)雜的異步代碼流程

通過合理運(yùn)用宏任務(wù)和微任務(wù)，你可以更好地控制代碼的執(zhí)行時(shí)機(jī)，創(chuàng)建更流暢的用戶體驗(yàn)。記住這個(gè)簡(jiǎn)單的規(guī)則：同步代碼 → 所有微任務(wù) → 一個(gè)宏任務(wù) → 重復(fù)。

到此這篇關(guān)于JavaScript 事件循環(huán)宏任務(wù)與微任務(wù)詳解的文章就介紹到這了,更多相關(guān)js宏任務(wù)與微任務(wù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: