对于循环批量操作页面的DOM有很大帮助！利用文档碎片处理
然后一次性append
并且使用原生的javascript语句操作
documentcreateDocumentFragment()说白了就是为了节约使用DOM每次JavaScript对DOM的操作都会 改变页面的变现并重新刷新整个页面从而消耗了大量的时间为解决这个问题可以创建一个文档碎片把所有的新节点附加其上然后把文档碎片的内容一次 性添加到document中
这是我写的一个简单的测试页面
复制代码 代码如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=gb
" />
<title>document
createDocumentFragment()测试页面</title>
</head>
<body>
<script type="text/javascript">
var d
= new Date();
for(var i=
;i<
;i++)
{
var op=document
createElement("P");
var oText=document
createTextNode("test
");
op
appendChild(oText);
document
body
appendChild(op);
}
var d
= new Date();
document
write("方法一用时
" + (d
getTime()
d
getTime()) + "<br/>");
//
+
var d
= new Date();
var oFrag=document
createDocumentFragment();
for(var i=
;i<
;i++)
{
var op=document
createElement("P");
var oText=document
createTextNode("test
");
op
appendChild(oText);
oFrag
appendChild(op);
}
document
body
appendChild(oFrag);
//这段代码中
var d
= new Date();
document
write("方法二用时
" + (d
getTime()
d
getTime()) + "<br/>");
</script>
</body>
</html>
一 旦把节点添加到documentbody(或其后的节点)中页面就会立即反映出这个变化对于第一小段程序运行是没有任何问题的但问题是它调用了 十次documentbodyappendChild()每次要产生一次页面刷新这样会产生很多页面碎片而第二小段代 码documentbodyappendChild()仅调用了一次这意味着只需要进行一次页面的刷新需要的时间显然会比前面的要少
我用了三种浏览器测试上面的测试代码大致得出的结果为
IE
方法一用时
方法二用时
Firefox
方法一用时
方法二用时
Chrome
方法一用时
方法二用时
得出的结果还是和理论上的一致了
