DocumentFragement子节点的虚拟储存

DocumentFragement是一组子节点的“虚拟存储”，并且它没有父标签。在我们的例子中，将DocumentFragement想象成看不见的

• 元素，在 DOM外，一直保管着你的子节点，直到他们被注入DOM中。

Javascript代码 

var frag = document.createDocumentFragment();  

ajaxResult.items.forEach(function(item) {  
    // 创建<li>元素  
    var li = document.createElement('li');  
    li.innerHTML = item.text;  

    // <li>元素常规操作  
    // 例如添加class，更改属性attribute，添加事件监听，添加子节点等  

    // 将<li>元素添加到碎片中  
    frag.appendChild(li);  
});  

// 最后将所有的列表对象通过DocumentFragment集中注入DOM  
document.querySelector('ul').appendChild(frag);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

为DocumentFragment追加子元素，然后再将这个DocumentFragment加到父列表中，这一系列操作仅仅是一个DOM操作，因此它比起集中注入要快很多。