长任务阻塞主线程怎么优化？

打工人春依提问于 2026-03-11 14:30:21 阅读 21

移动

我在移动端页面里有个数据处理函数，一跑就卡顿好几秒，Chrome DevTools 显示是 Long Task。试过用 setTimeout 分片，但效果不明显，还有啥靠谱的办法吗？

这是我的处理逻辑：

function processData(data) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    // 模拟复杂计算
    result.push(expensiveComputation(data[i]));
  }
  updateUI(result);
}

移动性能长任务优化

我来解答赞 3 收藏

反馈

1 条解答

公孙纳利 Lv1

用 requestIdleCallback 代替 setTimeout，它能在浏览器空闲时执行任务，比 setTimeout 靠谱多了：

function processData(data) {

  const result = [];

  let index = 0;

  

  function processChunk() {

    const start = performance.now();

    

    while (index < data.length && performance.now() - start < 16) {

      result.push(expensiveComputation(data[index]));

      index++;

    }

    

    if (index < data.length) {

      requestIdleCallback(processChunk);

    } else {

      updateUI(result);

    }

  }

  

  requestIdleCallback(processChunk);

}

如果数据量特别大或者计算特别重，直接上 Web Worker 把计算挪出主线程，这才是根治办法。

2026-03-11 15:03