// 宏任務(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 渲染（瀏覽器）
// 頁面渲染本身也是一個宏任務(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ù)');
});

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ù)

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

// 不好的做法：可能導(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';
  });
}

// 在狀態(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();
  });
}

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

// 錯誤示例：會導(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);
  });
}

// Node.js 與瀏覽器的微任務(wù)優(yōu)先級差異
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

// 根據(jù)場景選擇任務(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 有機會更新
  }, 0);
}

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

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