关于document.createDocumentFragment()(转)
documentFragment 是一个无父对象的document对象.
他支持以下DOM2方法:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2属性:
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以将documentFragment 作为一个参数,(比如Node的 appendChild和insertBefore方法),这样,fragment 就可以被追加到父对象中。
var frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Ipsum Lorem'));
document.body.appendChild(frag);
document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。
为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
var oui=document.getElementById("oItem");
for(var i=0;i<10;i++){
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item"+i));
}
上面的代码在循环中调用了oui.appendChild(oli),每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点,也要更新页面。所以一共要更新页面20次。
为了页面的优化,我们要尽量减少DOM的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatDocumentFragment(),代码如下:
var oui=document.getElementById("oItem");
var oFragment=document.createDocumentFragment();
for(var i=0;i<10;i++){
var oli=document.createElement("li");
oli.appendChild(document.createTextNode("Item"+i));
oFragment.appendChild(oli);
}
oui.appendChild(oFragment);
测试页面案例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>document.createDocumentFragment()测试页面</title>
</head>
<body>
<script type="text/javascript">
var d1 = new Date();
for(var i=0;i<1000;i++){
var op=document.createElement("P");
var oText=document.createTextNode("test1");
op.appendChild(oText);
document.body.appendChild(op);
} var d2 = new Date();
document.write("方法一用时:" + (d2.getTime() - d1.getTime()) + "<br/>");
//---+----- var d3 = new Date();
var oFrag=document.createDocumentFragment();
for(var i=0;i<1000;i++){
var op=document.createElement("P");
var oText=document.createTextNode("test2");
op.appendChild(oText);
oFrag.appendChild(op);
} document.body.appendChild(oFrag);
//这段代码中
var d4 = new Date();
document.write("方法二用时:" + (d4.getTime() - d3.getTime()) + "<br/>");
</script>
</body>
</html>
Firefox: 方法一用时:11
方法二用时:7
转载自: http://www.aspxhome.com/javascript/start/20094/86925.htm
最新文章
- 在阿里云中编译Linux4.5.0内核 - Ubuntu内核编译教程
- deiban8 sourcelist
- Active MQ 传输 ObjectMessage 异常
- JS刷新页面总和!多种JS刷新页面代码!
- Easier Done Than Said?
- 献给迷惘的Java架构工程师
- MemoryStream请求与接收
- 132.leecode-Palindrome Partitioning II
- php 处理ftp常用操作与方法
- MySQL Lock--INSERT加锁规则
- RTSP server 在mips 上莫名其妙退出(PC上则无此问题)
- VS2010整合NUnit进行单元测试
- 利用InstallShiled 10.5制作AE应用程序安装包
- Oracle中表列由VARCHAR2类型改成CLOB
- jQuery-关于Ajax请求async属性的说明及总结
- 离线服务器下docker的部署与应用
- 转!!SQL左右连接中的on and和on where的区别
- Arcgis Javascript API 开发笔记
- [转]Android解析json数据
- java网络访问指定出口ip