javascript - js怎样替换dom节点更快？

Question

<div>
  <div>
     <div id="video-wrap" style="display: inline-block; width: 489.5px; height: 505px; background: 0% 0% / 100% 100% rgb(0, 0, 0); ">
       <div></div>
       <div></div>
       <div></div>
     </div>
  </div>
</div>

// <div id="video"></div>

需求是将video-wrap0节点以及子节点删除，
然后在同位置生成一个<div id="video0"></div>，
因为会有for循环处理一批，所以要考虑性能问题，怎么用js操作性能更高呢？

Answer 1

可以参考vue的虚拟dom，一次性插入

1.通过 DocumentFragment 创建可在内存中操作的虚拟 DOM。
2.修改虚拟 DOM，新增、删除节点
3.将修改后的虚拟 DOM 一次性插入到父级DOM 中，减少重排和重绘。

Answer 2

替换的数量越少越快。就是一个基本的树形操作原理了，原始树越复杂越慢，操作节点越多越慢，所以推荐方式就是先拼装好带有子节点的子树，然后删一个节点再加一个节点就好了。
对于你这种循环来说就是把循环体的父节点直接替换掉。

Answer 3

在JavaScript中，如果你需要在循环中频繁地替换DOM节点并考虑性能，最直接且性能较好的方法是尽量减少对DOM的直接操作次数。这通常意味着你应该在可能的情况下使用文档片段（DocumentFragment）或者先构建好完整的HTML字符串，然后再一次性插入到DOM中。

对于你的具体需求，可以使用以下方法之一来优化性能：

方法1：使用DocumentFragment

这种方法通过创建一个临时的DocumentFragment来构建新的DOM结构，然后将这个片段整体插入到DOM中，这样可以减少对DOM的直接操作次数。

function replaceVideoWrap(parentId, newId) {
  const parent = document.querySelector(`#${parentId}`);
  const videoWrap = parent.querySelector('#video-wrap');

  if (videoWrap) {
    // 创建DocumentFragment
    const fragment = document.createDocumentFragment();
    // 创建新的div并添加到fragment
    const newDiv = document.createElement('div');
    newDiv.id = `${newId}`;
    fragment.appendChild(newDiv);

    // 替换旧的video-wrap
    parent.replaceChild(fragment, videoWrap);
  }
}

// 假设你在循环中调用这个函数
for (let i = 0; i < 100; i++) {
  replaceVideoWrap('someParentId', `video${i}`);
}

注意：上述代码在逻辑上有些问题，因为DocumentFragment不能直接替换一个已存在的元素。不过，你可以通过先将fragment的内容添加到另一个容器元素（比如一个临时的<div>），然后再替换。但在这个特定情况下，由于只需要一个<div>，我们可以直接创建并替换。如果确实需要DocumentFragment的优势（比如构建复杂的结构），你可能需要先构建一个包含新<div>的临时容器，然后替换。

方法2：直接替换（更简单）

对于简单的情况，直接创建新的元素并替换旧的元素可能更简单且性能也足够好（特别是当DOM结构不复杂时）。

function replaceVideoWrapSimple(parentId, newId) {
  const parent = document.querySelector(`#${parentId}`);
  const videoWrap = parent.querySelector('#video-wrap');

  if (videoWrap) {
    // 直接创建新的div并替换旧的video-wrap
    const newDiv = document.createElement('div');
    newDiv.id = `${newId}`;
    parent.replaceChild(newDiv, videoWrap);
  }
}

// 在循环中调用
for (let i = 0; i < 100; i++) {
  replaceVideoWrapSimple('someParentId', `video${i}`);
}

在这个例子中，我们直接创建了新的<div>元素，并用它替换了#video-wrap。这种方法更简单，且对于大多数情况来说，性能是足够的。如果你在处理大量数据或复杂的DOM结构，并且注意到性能瓶颈，那么可能需要考虑使用更高级的DOM操作方法或框架提供的优化手段。