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
