js 创建dom节点的方法之 createDocumentFragment()

js常见的创建dom节点的方法：

• createElement() 创建一个元素节点
• createTextNode() 创建一个文本节点
• createAttribute() 创建一个属性节点
• createComment() 创建一个注释节点

定义

createDocumentFragment() 是创建了一虚拟的节点对象。也可以说它创建一个文档碎片，把所有的新节点附加在其上，最后把文档碎片的内容一次性添加到 document 中，只需要一次页面刷新即可。

用法

document.createFragment()支持DOM2的方法：

a, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.

也支持DOM2的属性：

attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

作用

1. 快速响应，提高效率，提升用户体验。
2. 更安全改变文档的结构及节点。

对比

常规方式：

var d1 = new Date();

//创建一千个段落,常规的方式

for(var i = 0 ; i < 1000; i ++) {

    var p = document.createElement("p");

    var oTxt = document.createTextNode("段落" + i);

    p.append(oTxt);

    document.body.append(p);

}

var d2 = new Date();

console.log("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));
//第一次创建需要的时间:6

使用 createDocumentFragment()

//使用了createDocumentFragment()的程序

var d3 = new Date();

var pFragment = document.createDocumentFragment();

for(var i = 0 ; i < 1000; i ++) {

    var p = document.createElement("p");

    var oTxt = document.createTextNode("段落" + i);

    p.append(oTxt);

    pFragment.append(p);

}

document.body.append(pFragment);

var d4 = new Date();

console.log("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));
//第2次创建需要的时间:3