告别页面假死：前端大数据量处理的分块（Chunking）调度艺术

✨ 文章摘要

在前端开发中，我们经常会遇到“高性能挑战”：比如一次性渲染几万个 DOM 节点、处理巨大的 JSON 文本或者初始化成千上万个计算对象。

如果你直接写一个同步的 for 循环从 0 运行到 100,000，结果通常只有一个：浏览器主线程被长时间占用，界面卡死（死机），用户无法操作，甚至弹出“页面无响应”提示。

本文将解析一种通用的优化思路：分块处理（Chunking）与分时调度。

---

1. 问题的根源：长任务（Long Task）

JavaScript 是单线程的。这意味着它在执行 JS 代码和渲染 UI 界面时使用的是同一个线程。

• 阻塞机制：当你执行一个耗时 2 秒的循环时，浏览器会被卡住 2 秒，期间无法响应任何输入（点击、滚动）。
• 50ms 准则：为了保持界面流畅，每一帧留给 JS 执行的时间非常有限。超过 50ms 的任务就会被定义为“长任务”，会导致明显的丢帧和交互延迟。

---

2. 核心方案：化整为零

**分块（Chunking）**的核心思想是：不要一口气吃掉一整头大象，而是把它切成片，分批吃。

核心步骤：

1. 定义步长（CHUNK_SIZE）：规定每一批处理的数据量（例如 5000 条）。
2. 执行当前块：只处理当前批次的数据，完成后立即停止。
3. 让出控制权：利用异步调度，将控制权还给浏览器，让它有时间去处理 UI 渲染和用户交互。
4. 递归触发：告诉浏览器：“等你空闲了，再帮我执行下一块”。

---

3. 代码实现模式

以下是一个通用的异步分块处理模式示例：

/**
 * 分块处理大数据量函数
 * @param data 原始海量数据源
 */
const processInChunks = async (data: any[]) => {
  let index = 0;
  const CHUNK_SIZE = 5000; // 根据业务复杂程度调整每批大小

  const processChunks = () => {
    // 1. 计算本批次的结束位置
    const end = Math.min(index + CHUNK_SIZE, data.length);

    // 2. 执行本批次的逻辑
    for (; index < end; index++) {
      const item = data[index];
      // 这里执行你的业务逻辑：创建对象、计算属性、或是准备渲染数据
      handleDataItem(item);
    }

    // 3. 调度检查
    if (index < data.length) {
      /**
       * 关键点：利用 requestIdleCallback
       * 它会在浏览器每一帧的空隙时间调用执行函数，
       * 保证了即使在处理数据，用户缩放、点击等操作依然顺滑。
       */
      requestIdleCallback(processChunks);
    } else {
      console.log("所有数据分块处理完成");
    }
  };

  // 启动第一次处理
  processChunks();
};