DocumentFragment实现性能优化

案例

没有通过for循环一次次修改DOM元素，而是先添加到虚拟DOM中的fragment中，然后再一次性添加到DOM树中，只修改一次DOM树，大大提高了性能

// 创建100个li元素然后添加到文档中
var element  = document.getElementById('ul')
var fragment = document.createDocumentFragment()
for(var i=0;i<100;i++){
     // 创建节点
     var li = document.createElement('li')
     li.innerText = i
     // 没有直接添加到ul中，而是添加到了fragment对象中
     fragment.appendChild(li)
}
// 一次性的添加到实际的dom中
element.appendChild(fragment)