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>
新聞熱點(diǎn)
疑難解答
圖片精選
