淺析document.createDocumentFragment()與js效率
更新時(shí)間：2013年07月08日 10:57:06 作者：
對(duì)于循環(huán)批量操作頁(yè)面的DOM有很大幫助！利用文檔碎片處理，然后一次性append，并且使用原生的javascript語(yǔ)句操作
document.createDocumentFragment()說(shuō)白了就是為了節(jié)約使用DOM。每次JavaScript對(duì)DOM的操作都會(huì)改變頁(yè)面的變現(xiàn)，并重新刷新整個(gè)頁(yè)面，從而消耗了大量的時(shí)間。為解決這個(gè)問(wèn)題，可以創(chuàng)建一個(gè)文檔碎片，把所有的新節(jié)點(diǎn)附加其上，然后把文檔碎片的內(nèi)容一次性添加到document中。
這是我寫的一個(gè)簡(jiǎn)單的測(cè)試頁(yè)面：
復(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è)試頁(yè)面</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))中，頁(yè)面就會(huì)立即反映出這個(gè)變化。對(duì)于第一小段程序，運(yùn)行是沒(méi)有任何問(wèn)題的，但問(wèn)題是它調(diào)用了十次document.body.appendChild(),每次要產(chǎn)生一次頁(yè)面刷新，這樣會(huì)產(chǎn)生很多頁(yè)面碎片。而第二小段代碼，document.body.appendChild()僅調(diào)用了一次，這意味著只需要進(jìn)行一次頁(yè)面的刷新，需要的時(shí)間顯然會(huì)比前面的要少。
我用了三種瀏覽器測(cè)試上面的測(cè)試代碼，大致得出的結(jié)果為：
IE7：
方法一用時(shí)：140
方法二用時(shí)：125
Firefox：
方法一用時(shí)：66
方法二用時(shí)：43
Chrome：
方法一用時(shí)：35
方法二用時(shí)：25
得出的結(jié)果還是和理論上的一致了。
相關(guān)文章
本文就和大家談一談javascript中的繼承，什么是繼承，繼承的作用，以及js繼承的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了基于JS繪制2021的煙花效果，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件，但是得到的結(jié)果卻不是想要的，下面有個(gè)不錯(cuò)的示例，可以為大家詳細(xì)分解下2014-04-04
純JavaScript實(shí)現(xiàn)的分頁(yè)插件實(shí)例
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)的分頁(yè)插件,涉及javascript結(jié)合php動(dòng)態(tài)實(shí)現(xiàn)分頁(yè)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
sencha touch 模仿tabpanel導(dǎo)航欄TabBar的實(shí)例代碼
這篇文章介紹了sencha touch 模仿tabpanel導(dǎo)航欄TabBar的實(shí)例代碼，有需要的朋友可以參考一下
2013-10-10 
淺談webpack性能榨汁機(jī)(打包速度優(yōu)化)
這篇文章主要介紹了淺談webpack性能榨汁機(jī)(打包速度優(yōu)化)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01 
bootstrap-table是在bootstrap-table的基礎(chǔ)上寫出來(lái)的，專門用于顯示數(shù)據(jù)的表格插件。這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12 
JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個(gè)常用的方法,用于遍歷數(shù)組或類數(shù)組對(duì)象中的每個(gè)元素,本文就來(lái)介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-11-11 
微信小程序最新獲取頭像信息之前是使用open-dada獲取微信頭像和昵稱,但是后面由于官網(wǎng)更新,此方法被收回了,所以不能使用此方法了,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取頭像和昵稱的最新方法,本文介紹的方法可以直接拿來(lái)用,需要的朋友可以參考下
2023-05-05