innerHTML性能优化：批量修改时为部分文本加样式的高效方案

遇到批量操作DOM时innerHTML拖慢性能的问题太常见了——尤其是处理上百个元素的时候，每次设置innerHTML都会触发浏览器的DOM解析和重排重绘，循环里反复操作的话性能开销会成倍增长。下面给你几个性能更优的替代方案，按场景分：

1. 用DocumentFragment批量创建节点（最推荐，安全又高效） #

DocumentFragment是一个"虚拟"的DOM容器，你可以把所有要创建的元素先塞进它里面，最后一次性把整个Fragment挂载到真实DOM上——这样只会触发一次重排，比循环里反复操作真实DOM快太多。

举个例子，假设你要给数组里的每个文本项加样式：

// 假设你的数据源是这个数组
const itemList = Array.from({length: 150}, (_, i) => `第${i+1}个需要样式的项`);
const targetElement = document.getElementById('target');

// 创建空的Fragment
const fragment = document.createDocumentFragment();

itemList.forEach(text => {
  // 用DOM方法创建元素，而不是拼接HTML字符串
  const itemEl = document.createElement('div');
  // 用CSS类加样式（比内联样式更高效，还能复用）
  itemEl.classList.add('styled-item');
  // 设置文本内容（textContent比innerHTML更安全，不会解析HTML）
  itemEl.textContent = text;
  
  fragment.appendChild(itemEl);
});

// 一次性挂载到真实DOM
targetElement.appendChild(fragment);

对应的CSS提前写好：

.styled-item {
  color: #2c3e50;
  padding: 8px;
  border-bottom: 1px solid #eee;
}

如果是部分文本需要样式（比如一段文字里的某几个关键词），也可以用这种方式拆分文本节点和带样式的元素：

const fragment = document.createDocumentFragment();
const originalText = '这是一段需要【高亮】和【加粗】的文本';
// 按标记拆分文本
const segments = originalText.split(/【|】/);

segments.forEach((seg, index) => {
  // 偶数索引是普通文本，奇数索引是需要样式的部分
  if (index % 2 === 0) {
    fragment.appendChild(document.createTextNode(seg));
  } else {
    const highlightSpan = document.createElement('span');
    highlightSpan.className = 'highlight-text';
    highlightSpan.textContent = seg;
    fragment.appendChild(highlightSpan);
  }
});

targetElement.appendChild(fragment);

2. 一次性拼接innerHTML字符串（适合结构简单的场景） #

如果你觉得DOM方法写起来麻烦，也可以把所有HTML字符串先拼接好，只设置一次innerHTML——这样比循环里每次都设置innerHTML性能提升很多，因为只触发一次DOM解析。

注意：这种方式要确保你的内容是安全的（没有用户输入的恶意HTML），否则会有XSS风险。

const itemList = Array.from({length: 150}, (_, i) => `第${i+1}个需要样式的项`);
const targetElement = document.getElementById('target');

// 先批量拼接所有HTML
let htmlStr = '';
itemList.forEach(text => {
  htmlStr += `<div class="styled-item">${text}</div>`;
});

// 一次性赋值
targetElement.innerHTML = htmlStr;

3. 额外优化技巧：减少重排次数 #

不管用哪种方法，都可以配合以下技巧进一步提升性能：

• 先移除DOM再操作：把目标元素从DOM树上临时移除，操作完成后再插回去，这样只会触发两次重排（移除和插入）：

  const targetElement = document.getElementById('target');
  const parent = targetElement.parentElement;
  
  // 临时移除
  parent.removeChild(targetElement);
  
  // 这里进行批量操作（比如用Fragment或拼接innerHTML）
  
  // 插回DOM
  parent.appendChild(targetElement);
  

• 用CSS类代替内联样式：尽量避免用element.style.color = 'red'这种内联样式，提前写好CSS类，用classList.add()添加——浏览器可以批量应用样式规则，性能更好，也更易维护。

为什么这些方法比循环innerHTML快？ #

每次调用element.innerHTML = xxx时，浏览器都会做这些事：

1. 清空元素内的所有子节点
2. 解析传入的HTML字符串，创建新的DOM节点
3. 把新节点挂载到元素上
4. 触发重排重绘

如果在循环里做这件事，上百次操作就会重复上百次这些步骤，性能开销自然爆炸。而上面的方法都是把所有操作攒到一起，只触发一次DOM解析和重排，性能差距会非常明显。

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