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.
作用
- 快速响应,提高效率,提升用户体验。
- 更安全改变文档的结构及节点。
对比
常规方式:
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