谈谈JS的DocumentFragment

DocumentFragment简单描述

documentFragment是nodeType值为11，nodeName的值为#document-fragment.

1) documentFragment是一个文档片段，一种‘轻量级节点’

2) 通常作为仓库来使用，不存在DOM树上，是一种游离态

 

DocumentFragment的用途

当我们用JS的DOM创建很多节点时，在加入节点到DOM树上时，节点需要一个个渲染，这样节点数较多时就会影响浏览器的渲染效率，这个时候我们将创建的节点都放在DocumentFragment这样的节点上 ，然后把DocumentFragment加入至DOM，只需要完成一次渲染就可以达到之前很多次渲染的效果！！！

举个栗子（创建100个li元素内容为1-100）：

 var ul = document.createElement('ul');
 var flag = document.createDocumentFragment();
 for(var i=1; i<101;i++){
     var li = document.createElement('li')
     var liText = document.createTextNode(i);
     li.appendChild(liText);
     flag.appendChild(li);
 }
 ul.appendChild(flag);
 document.body.appendChild(ul);

 

 

本博客由博主原创，如需转载请注明出处！！！