微任务与宏任务优化

微任务与宏任务优化

微任务与宏任务是JavaScript事件循环中的核心概念，对性能优化至关重要。理解它们的执行顺序和差异，能有效避免代码阻塞、提升渲染效率，尤其在复杂交互场景下表现明显。

事件循环基础

JavaScript采用单线程模型，通过事件循环机制处理异步操作。当调用栈为空时，事件循环从任务队列中取出任务执行。任务分为两类：

1. 宏任务(Macrotask)：包括整体script代码、setTimeout、setInterval、I/O操作、UI渲染等
2. 微任务(Microtask)：包括Promise.then、MutationObserver、process.nextTick(Node.js)

执行顺序遵循：

// 典型执行顺序示例
console.log('script start'); // 宏任务

setTimeout(() => {
  console.log('setTimeout'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('promise1'); // 微任务
}).then(() => {
  console.log('promise2'); // 微任务
});

console.log('script end'); // 宏任务

/*
输出顺序：
script start
script end
promise1
promise2
setTimeout
*/

微任务特性与优化

微任务在当前宏任务结束后立即执行，具有更高优先级。这种特性可用于：

批量DOM更新

// 低效做法
elements.forEach(el => {
  el.style.width = '100px'; // 触发多次重排
});

// 优化方案
Promise.resolve().then(() => {
  elements.forEach(el => {
    el.style.width = '100px'; // 一次重排
  });
});

状态同步

let data;
fetchData().then(res => {
  data = res; // 微任务中赋值
});

// 后续代码可以包装成微任务保证数据可用
Promise.resolve().then(() => {
  processData(data);
});

宏任务优化策略

宏任务适合处理不紧急的耗时操作，合理调度可避免界面卡顿：

长任务分解

// 原始长任务
function processHugeArray() {
  for(let i=0; i<1e6; i++) {
    // 耗时计算...
  }
}

// 分解为宏任务
function chunkedProcess(array, index = 0, chunkSize = 1000) {
  const end = Math.min(index + chunkSize, array.length);
  for(; index < end; index++) {
    // 处理当前块
  }
  if(index < array.length) {
    setTimeout(() => chunkedProcess(array, index, chunkSize));
  }
}

动画优化

// 使用requestAnimationFrame替代setTimeout
function animate() {
  // 动画逻辑...
  requestAnimationFrame(animate);
}
animate();

混合使用场景

复杂交互中需要协调两种任务：

用户输入处理

input.addEventListener('input', () => {
  // 立即反馈（微任务）
  Promise.resolve().then(updatePreview);
  
  // 耗时操作（宏任务）
  setTimeout(() => {
    sendAnalytics();
    updateDatabase();
  }, 0);
});

服务端数据流处理

function processStream(stream) {
  stream.on('data', chunk => {
    // 微任务处理核心数据
    Promise.resolve().then(() => parseChunk(chunk));
    
    // 宏任务处理非关键操作
    setTimeout(() => logChunk(chunk), 0);
  });
}

性能陷阱与规避

微任务堆积

// 危险的递归微任务
function recursiveMicrotask() {
  Promise.resolve().then(recursiveMicrotask); // 导致主线程阻塞
}

宏任务延迟累积

// 定时器漂移问题
let start = Date.now();
let count = 0;

function delayedTask() {
  count++;
  const offset = Date.now() - start;
  console.log(`第${count}次执行，偏差: ${offset - count*100}ms`);
  
  if(count < 10) {
    setTimeout(delayedTask, 100);
  }
}
setTimeout(delayedTask, 100);

现代API的优化应用

queueMicrotask API

// 比Promise.resolve()更直接的微任务API
function criticalUpdate() {
  queueMicrotask(() => {
    updateUI();
    logState();
  });
}

requestIdleCallback

// 空闲时段执行任务
requestIdleCallback((deadline) => {
  while(deadline.timeRemaining() > 0) {
    performBackgroundWork();
  }
});

框架中的实践

React批量更新

// React利用微任务实现状态批量更新
function Component() {
  const [state, setState] = useState();
  
  const handleClick = () => {
    setState(1);  // 不会立即重渲染
    setState(2);  // 合并更新
  };
}

Vue nextTick

// Vue的nextTick实现
this.message = 'updated';
this.$nextTick(() => {
  // DOM更新后执行
  console.log(this.$el.textContent);
});

调试与监控

Chrome性能面板

1. 识别长任务(超过50ms)
2. 分析任务组成(宏任务/微任务占比)
3. 检测任务调度频率

PerformanceObserver

const observer = new PerformanceObserver((list) => {
  for(const entry of list.getEntries()) {
    console.log('[长任务]', entry);
  }
});
observer.observe({entryTypes: ['longtask']});

Node.js环境差异

process.nextTick与setImmediate

// nextTick优先级高于promise微任务
process.nextTick(() => console.log(1));
Promise.resolve().then(() => console.log(2));
// 输出顺序：1, 2

// setImmediate属于宏任务
setImmediate(() => console.log('宏任务'));

文件I/O优化

const fs = require('fs');

// 使用setImmediate分解大文件处理
function processLargeFile(path) {
  fs.readFile(path, (err, data) => {
    const chunks = splitData(data);
    
    function processChunk(index) {
      if(index >= chunks.length) return;
      
      doWork(chunks[index]);
      setImmediate(() => processChunk(index + 1));
    }
    
    processChunk(0);
  });
}