CreateDocumentFragment

2018-07-30

在网页中直接操作DOM元素会对内存和CPU造成损耗， 所以在MVVM中使用文件碎片(document.createDocumentFragment)在暂存dom元素，关于这个文件碎片的坑！我在代码中写到

  node2fragment(domTree) {
    let fragment = document.createDocumentFragment()

    while (domTree.firstChild) {
      fragment.appendChild(domTree.firstChild)
    }

    return fragment
  }

在node2fragment这个方法中我传入的我的DOM树， 然后遍历他通过fragment将其存放到内存中， 但是在while中我只写到遍历第一个子节点， 其实执行循环体fragment.appendChild(domTree.firstChild)后， 第一个domTree中的第一个子节点也被移除了。

Demo

HTML:

  <ul>
    <li>first</li>
    <li>second</li>
  </ul>

JavaScript:

    let ul = document.querySelector('ul')
    let fragment = document.createDocumentFragment()
    fragment.appendChild(ul.firstChild) //#text
    fragment.appendChild(ul.firstChild) // li中的first, 已经被移除

页面效果:

image.png

此时，第一个li已经被移到了内存中

Tips: 关于createDocumentFragment与createElement的区别

多次append createElement 只有最后一个append的元素有效
多次append createDocumentFragment 只有第一个append有效

//今天写到这里去就要陪女朋友了，时间2018/07/30 21:32
//更新时间 2018/07/30 23:43