如何用JavaScript高效渲染700000个HTML元素？

针对你要生成700000个元素的场景，以下几个方法能大幅提升性能，尤其是在低性能设备上：

1. 用DocumentFragment批量插入元素 #

DocumentFragment是一个轻量的文档容器，不会触发浏览器的重排重绘，你可以先把所有元素都塞进片段里，最后一次性插入DOM，比逐个appendChild快得多：

const fragment = document.createDocumentFragment();
const dataArray = 你的70万数据数组;

dataArray.forEach(item => {
  const el = document.createElement('div');
  el.textContent = item.content; // 设置元素内容
  el.dataset.id = item.id; // 存标识，方便后续事件委托取数据
  fragment.appendChild(el);
});

document.body.appendChild(fragment);

2. 事件委托代替逐个绑定事件 #

给70万个元素逐个绑addEventListener会占用巨量内存，直接给父元素（比如body）绑一个事件，通过事件冒泡判断目标元素即可：

// 提前把数组转成映射，提升数据查找速度
const dataMap = new Map(dataArray.map(item => [item.id, item]));

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.你的元素类名')) { // 或通过标签、dataset判断
    const itemId = e.target.dataset.id;
    const targetData = dataMap.get(itemId);
    // 展示对应数据
    console.log(targetData);
  }
});

3. 分批插入避免主线程阻塞 #

即使是用DocumentFragment，一次性插入70万元素还是可能让浏览器卡顿，尤其是移动端。可以把数据分成若干批次，用requestAnimationFrame分批插入，给浏览器留足处理其他任务的时间：

const dataArray = 你的70万数据数组;
const batchSize = 1000; // 每批插入1000个，可根据设备性能调整
let currentIndex = 0;
const fragment = document.createDocumentFragment();

function insertBatch() {
  const endIndex = Math.min(currentIndex + batchSize, dataArray.length);
  for (; currentIndex < endIndex; currentIndex++) {
    const item = dataArray[currentIndex];
    const el = document.createElement('div');
    el.textContent = item.content;
    el.dataset.id = item.id;
    fragment.appendChild(el);
  }
  document.body.appendChild(fragment);
  // 重置片段，准备下一批
  fragment.textContent = '';
  
  if (currentIndex < dataArray.length) {
    requestAnimationFrame(insertBatch);
  }
}

// 启动分批插入
insertBatch();

4. 可选：用innerHTML批量生成（数据可信时） #

如果你的数据是安全可信的（无XSS风险），可以直接拼接HTML字符串，一次性设置innerHTML，速度会比逐个创建元素更快：

const dataArray = 你的70万数据数组;
let htmlStr = '';
dataArray.forEach(item => {
  htmlStr += `<div class="item" data-id="${item.id}">${item.content}</div>`;
});
document.body.innerHTML = htmlStr;

// 同样配合事件委托处理点击
const dataMap = new Map(dataArray.map(item => [item.id, item]));
document.body.addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    const itemId = e.target.dataset.id;
    const targetData = dataMap.get(itemId);
    // 展示数据
  }
});

注意：如果数据包含用户输入内容，一定要先转义特殊字符（比如把<转成<），防止XSS攻击。

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