熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

淺析document.createDocumentFragment()與js效率

2013-11-15 12:16:15  來源: JSP教程 
對於循環批量操作頁面的DOM有很大幫助!利用文檔碎片處理然後一次性append並且使用原生的javascript語句操作  

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

復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=gb" />
<title>documentcreateDocumentFragment()測試頁面</title>
</head>
<body>
<script type="text/javascript">
       var d = new Date();
       for(var i=;i<;i++)
       {
              var op=documentcreateElement("P");
              var oText=documentcreateTextNode("test");
              opappendChild(oText);
              documentbodyappendChild(op);
       }
       var d = new Date();
       documentwrite("方法一用時" + (dgetTime() dgetTime()) + "<br/>");
       //+
       var d = new Date();
       var oFrag=documentcreateDocumentFragment();
       for(var i=;i<;i++)
       {
              var op=documentcreateElement("P");
              var oText=documentcreateTextNode("test");
              opappendChild(oText);
              oFragappendChild(op);
       }
       documentbodyappendChild(oFrag);
       //這段代碼中
       var d = new Date();
       documentwrite("方法二用時" + (dgetTime() dgetTime()) + "<br/>");
</script>
</body>
</html>

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


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20613.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.