淺析document.createDocumentFragment()與js效率

2019-11-20 22:33:28

字體：大中小

供稿：網(wǎng)友

document.createDocumentFragment()說白了就是為了節(jié)約使用DOM。每次JavaScript對(duì)DOM的操作都會(huì)改變頁面的變現(xiàn)，并重新刷新整個(gè)頁面，從而消耗了大量的時(shí)間。為解決這個(gè)問題，可以創(chuàng)建一個(gè)文檔碎片，把所有的新節(jié)點(diǎn)附加其上，然后把文檔碎片的內(nèi)容一次性添加到document中。
這是我寫的一個(gè)簡(jiǎn)單的測(cè)試頁面：

復(fù)制代碼代碼如下:

<!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()測(cè)試頁面</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("方法一用時(shí)：" + (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("方法二用時(shí)：" + (d4.getTime() - d3.getTime()) + "<br/>");
</script>
</body>
</html>

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

上一篇：解析js原生方法創(chuàng)建表格效率測(cè)試

下一篇：如何使用Javascript獲取距今n天前的日期