DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 淺析document.createDocumentFragment()與js效率
淺析document.createDocumentFragment()與js效率
編輯:JavaScript綜合知識     
對於循環批量操作頁面的DOM有很大幫助!利用文檔碎片處理,然後一次性append,並且使用原生的javascript語句操作  

document.createDocumentFragment()說白了就是為了節約使用DOM。每次JavaScript對DOM的操作都會 改變頁面的變現,並重新刷新整個頁面,從而消耗了大量的時間。為解決這個問題,可以創建一個文檔碎片,把所有的新節點附加其上,然後把文檔碎片的內容一次 性添加到document中。
這是我寫的一個簡單的測試頁面:

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>


一 旦把節點添加到document.body(或其後的節點)中,頁面就會立即反映出這個變化。對於第一小段程序,運行是沒有任何問題的,但問題是它調用了 十次document.body.appendChild(),每次要產生一次頁面刷新,這樣會產生很多頁面碎片。而第二小段代 碼,document.body.appendChild()僅調用了一次,這意味著只需要進行一次頁面的刷新,需要的時間顯然會比前面的要少。
我用了三種浏覽器測試上面的測試代碼,大致得出的結果為:
IE7:
       方法一用時:140
       方法二用時:125
Firefox:
       方法一用時:66
       方法二用時:43
Chrome:
       方法一用時:35
       方法二用時:25
得出的結果還是和理論上的一致了。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved