createDocumentFragment的使用

createDocumentFragment的使用

描述

mdn描述：DocumentFragments (en-US) 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。

语法

let fragment = document.createDocumentFragment();

使用案例

const em = document.createDocumentFragment()
function createBoxes() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      const box = document.createElement('div')
      box.classList.add('box')
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      em.appendChild(box)
    }
  }
  boxesContainer.appendChild(em)
}

createBoxes()

小结

使用createDocumentFragment()，将需要多次创建的元素一次性添加到页面dom上，这样有助于提高性能。