對於循環批量操作頁面的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
方法一用時
方法二用時
得出的結果還是和理論上的一致了
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20613.html
