Array Reduce操作阻塞CSS动画，如何实现后台执行并保留加载动画？

问题根源 #

你之前用Promise、async/await、setTimeout没效果，是因为这些操作本质上还是在主线程执行排序和对象合并逻辑。当数据量很大时，sort和reduce（尤其是每次reduce都用扩展运算符创建新对象，这个操作性能损耗极大）会长时间占用主线程，导致浏览器无法及时渲染CSS动画，出现冻结。

解决方案 #

1. 使用Web Worker（推荐） #

Web Worker是浏览器提供的后台线程，能在不阻塞主线程的情况下执行计算密集型任务，完美适配你的场景。

步骤：

• 创建独立的Worker脚本文件（比如sort-worker.js）：

self.onmessage = function(e) {
  const dictionary = e.data;
  const sortedByFrequency = Object.entries(dictionary)
    .sort(([, v1], [, v2]) => v2 - v1)
    .reduce((obj, [k, v]) => ({
      ...obj,
      [k]: v
    }), {});
  self.postMessage(sortedByFrequency);
};

• 主线程代码：

// 显示加载动画
document.getElementById('loading-spinner').style.display = 'block';

// 创建Worker实例
const sortWorker = new Worker('sort-worker.js');

// 传递待处理数据给Worker
sortWorker.postMessage(dictionary);

// 接收处理结果
sortWorker.onmessage = function(e) {
  const sortedByFrequency = e.data;
  // 这里写拿到结果后的业务逻辑（比如更新页面）
  // 隐藏加载动画
  document.getElementById('loading-spinner').style.display = 'none';
  // 销毁Worker释放资源
  sortWorker.terminate();
};

// 处理Worker错误
sortWorker.onerror = function(error) {
  console.error('Worker执行出错:', error);
  document.getElementById('loading-spinner').style.display = 'none';
  sortWorker.terminate();
};

2. 分块处理（无Worker替代方案） #

如果因环境限制无法使用Web Worker，可以把大数组拆成小块，利用requestIdleCallback在主线程空闲时逐块处理，给动画渲染留足时间。同时优化reduce逻辑，避免频繁创建新对象：

// 显示加载动画
document.getElementById('loading-spinner').style.display = 'block';

const entries = Object.entries(dictionary);
const chunkSize = 1000; // 根据数据规模调整块大小
let currentIndex = 0;
const sortedEntries = [];

function processNextChunk() {
  const end = Math.min(currentIndex + chunkSize, entries.length);
  // 对当前块排序
  const chunk = entries.slice(currentIndex, end).sort(([, v1], [, v2]) => v2 - v1);
  sortedEntries.push(...chunk);
  currentIndex = end;

  if (currentIndex < entries.length) {
    // 主线程空闲时处理下一块
    requestIdleCallback(processNextChunk);
  } else {
    // 合并结果（用直接赋值替代扩展运算符，大幅提升性能）
    const sortedByFrequency = {};
    for (const [k, v] of sortedEntries) {
      sortedByFrequency[k] = v;
    }
    // 处理结果，隐藏动画
    document.getElementById('loading-spinner').style.display = 'none';
  }
}

// 启动分块处理
requestIdleCallback(processNextChunk);

关键优化点 #

• 把reduce里的{...obj, [k]:v}改成直接赋值obj[k] = v，避免每次创建新对象的性能开销。
• 优先使用Web Worker彻底隔离计算任务，这是解决主线程阻塞最彻底的方式。

内容的提问来源于stack exchange，提问作者Max Lyoto