优化长任务（Long Tasks）与任务拆分（Task Splitting）

1. 问题描述

浏览器主线程是单线程的，负责执行 JavaScript、处理 DOM、计算样式等。当一个任务（Task）连续占用主线程超过 50 毫秒（ms） 时，会被定义为长任务（Long Task）。长任务会阻塞用户交互、渲染等关键操作，导致页面卡顿（如点击无响应、动画掉帧），影响用户体验和 Core Web Vitals 中的交互到下一次绘制（INP） 指标。

长任务的常见来源：

• 复杂的 JavaScript 计算（如大数据排序、递归操作）。
• 同步的 DOM 操作（如循环中频繁修改 DOM）。
• 大量数据的解析（如 JSON 解析、Canvas 渲染）。

2. 优化思路：拆分长任务

核心目标是将长任务拆分为多个短任务（每个任务 < 50ms），让主线程能及时响应用户输入或渲染。以下是渐进式优化方法：

步骤 1：识别长任务

• 使用 Chrome DevTools 的 Performance 面板录制页面运行情况，观察主线程中的长任务（红色标记块）。
• 通过 PerformanceObserver API 动态监控长任务：

  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
      console.log("长任务耗时:", entry.duration, "ms");
    });
  });
  observer.observe({ entryTypes: ["longtask"] });
  

步骤 2：任务拆分策略

策略 1：使用 setTimeout 或 setInterval
将任务分割为多个子任务，通过定时器分批执行。例如，处理大型数组时：

// 优化前：同步循环导致长任务
function processData(data) {
  for (let i = 0; i < data.length; i++) {
    // 复杂计算...
  }
}

// 优化后：分批次执行
function processInBatches(data, batchSize = 100) {
  let index = 0;
  function nextBatch() {
    const end = Math.min(index + batchSize, data.length);
    for (; index < end; index++) {
      // 处理单个数据项...
    }
    if (index < data.length) {
      // 将剩余任务推迟到下一个事件循环
      setTimeout(nextBatch, 0);
    }
  }
  nextBatch();
}

注意：setTimeout 的延迟时间设为 0 表示将任务拆分为独立的宏任务，避免阻塞主线程。

策略 2：使用 requestIdleCallback
在浏览器空闲时段执行低优先级任务，避免影响关键操作：

function idleTimeProcessing(data) {
  let index = 0;
  function processChunk(deadline) {
    while (index < data.length && deadline.timeRemaining() > 0) {
      // 在空闲时间内处理单个数据项...
      index++;
    }
    if (index < data.length) {
      requestIdleCallback(processChunk); // 继续调度剩余任务
    }
  }
  requestIdleCallback(processChunk);
}

适用场景：非紧急任务（如日志上报、预加载资源）。

策略 3：使用 Web Workers
将纯计算密集型任务（如图像分析、加密解密）移至 Web Worker 线程，彻底避免阻塞主线程：

// 主线程
const worker = new Worker("task.js");
worker.postMessage(largeData);
worker.onmessage = (e) => {
  // 接收结果
};

// task.js
self.onmessage = (e) => {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

步骤 3：优化 DOM 操作

• 减少重排：使用 documentFragment 或离线 DOM 进行批量操作。
• 使用 requestAnimationFrame：将动画相关的计算与渲染帧对齐，避免布局抖动。

3. 权衡与注意事项

• 拆分任务可能增加总耗时：但能显著提升页面响应性。
• 避免过度拆分：过多的微任务（如 Promise）或宏任务（如 setTimeout）可能增加调度开销。
• 优先级管理：用户交互任务（如点击事件）应优先于自动执行的任务。

通过拆分长任务，能有效降低主线程阻塞，提升页面的流畅度和响应速度。