JavaScript遍历大型数组避免页面冻结的实现方案

问题根源 #

当前代码导致页面冻结的核心原因是：JavaScript运行在单线程环境中，同步while循环会持续占用主线程，浏览器完全没有时间处理DOM渲染操作，直到整个循环执行完毕才会一次性更新页面。此外，频繁使用innerHTML +=会重复解析整个列表的HTML结构，进一步加重性能负担。

解决方案 #

方案1：用requestAnimationFrame逐次添加元素 #

利用requestAnimationFrame让浏览器在每次重绘前执行添加操作，确保每次元素添加后浏览器都能及时更新页面：

const myArray = [/* 10000个随机整数 */];
const targetWindow = window.open(); // 你创建的目标新窗口
const ul = targetWindow.document.getElementById("unorderedList");
let pos = 0;

function addItem() {
  if (pos < myArray.length) {
    // 直接创建li元素，避免innerHTML的性能损耗
    const li = targetWindow.document.createElement("li");
    li.textContent = myArray[pos]; // 原代码用了pos，这里修正为数组对应元素
    ul.appendChild(li);
    pos++;
    // 让浏览器重绘后继续执行下一次添加
    targetWindow.requestAnimationFrame(addItem);
  } else {
    console.log("done!");
  }
}

// 启动添加流程
targetWindow.requestAnimationFrame(addItem);

方案2：分批处理元素（性能更优） #

逐次添加10000个元素仍有性能开销，建议分批处理，每次批量添加一批元素后让出主线程：

const myArray = [/* 10000个随机整数 */];
const targetWindow = window.open();
const ul = targetWindow.document.getElementById("unorderedList");
let pos = 0;
const batchSize = 50; // 每批处理的元素数量，可根据性能调整

function addBatch() {
  const endPos = Math.min(pos + batchSize, myArray.length);
  // 用DocumentFragment批量存储元素，减少DOM操作次数
  const fragment = targetWindow.document.createDocumentFragment();
  for (; pos < endPos; pos++) {
    const li = targetWindow.document.createElement("li");
    li.textContent = myArray[pos];
    fragment.appendChild(li);
  }
  ul.appendChild(fragment);
  
  if (pos < myArray.length) {
    // 让出主线程，让浏览器渲染当前添加的元素
    targetWindow.setTimeout(addBatch, 0);
  } else {
    console.log("done!");
  }
}

addBatch();

关键优化点 #

• 抛弃innerHTML +=：改用createElement+appendChild或DocumentFragment批量操作，减少DOM重绘重排次数。
• 主动让出主线程：通过requestAnimationFrame或setTimeout让浏览器有时间处理渲染任务，避免主线程被长时间阻塞。
• 针对新窗口操作：确保所有DOM操作都基于新窗口的上下文（targetWindow.document），而非当前窗口。

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