JavaScript性能优化：DOM操作优化实战

JavaScript性能优化：DOM操作优化实战

一 重排与重绘的代价

问题场景

用户点击按钮后，需要动态生成一个包含10,000个选项的下拉列表，但界面出现长达5秒的冻结。

错误代码示例

function createList() {
  const ul = document.getElementById("myList");
  for(let i=0; i<10000; i++){
    const li = document.createElement("li");
    li.style.color = "red";  // 触发样式计算
    li.style.margin = "2px"; // 触发布局
    li.textContent = `选项 ${i}`;
    ul.appendChild(li);      // 每次循环都导致重排
  }
}

问题分析

• 每次循环都修改元素样式 ➔ 触发 强制同步布局（Forced Synchronous Layout）
• 直接操作真实DOM ➔ 累计触发 10,000次重排

二 高效DOM操作三板斧

优化方案1：文档碎片（DocumentFragment）

function createListOptimized() {
  const ul = document.getElementById("myList");
  const fragment = document.createDocumentFragment(); // 内存中的虚拟容器

  for(let i=0; i<10000; i++){
    const li = document.createElement("li");
    // 先完成所有属性设置
    li.textContent = `选项 ${i}`;
    li.className = "prestyled-item"; // 通过CSS类批量设置样式
    
    fragment.appendChild(li); // 不会触发真实DOM操作
  }

  ul.appendChild(fragment); // 仅1次重排
}

优化方案2：样式批量处理

/* 将样式集中到CSS类 */
.prestyled-item {
  color: red;
  margin: 2px;
}

优化方案3：读写分离原则

// 错误：交替读写布局属性
element.style.width = "100px";
const height = element.offsetHeight; // 触发立即计算
element.style.height = height + "px";

// 正确：先读后写
const height = element.offsetHeight; // 集中读取
element.style.width = "100px";        // 集中写入
element.style.height = height + "px";

三 事件监听器的正确姿势

内存泄漏陷阱

// 错误：为每个列表项绑定监听器
document.querySelectorAll(".item").forEach(item => {
  item.addEventListener("click", handleClick);
});

// 当需要移除元素时：
container.innerHTML = ""; // 监听器仍然残留在内存中！

优化方案：事件委托

// 正确：利用事件冒泡在父级监听
document.getElementById("container").addEventListener("click", e => {
  if(e.target.classList.contains("item")) {
    handleClick(e);
  }
});

优势对比：

方式	内存占用（1000个元素）	初始化耗时
单独绑定	1000个监听器	120ms
事件委托	1个监听器	15ms

四 虚拟DOM的启示

核心思想

数据变化

生成虚拟DOM树

对比新旧虚拟DOM

计算最小修改

批量更新真实DOM

手动实现简化版

let vDOM = { type: 'ul', children: [] };

// 更新函数
function updateDOM() {
  const realDOM = document.createElement(vDOM.type);
  vDOM.children.forEach(child => {
    const node = document.createElement(child.type);
    node.textContent = child.content;
    realDOM.appendChild(node);
  });
  
  // 批量替换
  document.getElementById("app").replaceChildren(realDOM);
}

// 添加新项时：
vDOM.children.push({ type: 'li', content: '新项目' });
requestAnimationFrame(updateDOM); // 在下一次重绘时集中更新

---

本章重点总结

1. 批量操作：使用文档碎片减少DOM操作次数
2. 样式管理：用CSS类替代直接样式操作
3. 事件优化：委托模式节省内存
4. 更新策略：集中修改减少重排次数

---