当前位置：首页 > news >正文

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

news 来源：原创 2025/5/21 1:26:06

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的启示

核心思想

手动实现简化版

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); // 在下一次重绘时集中更新