javascript程序優(yōu)化問題第2/3頁

更新時(shí)間：2008年05月16日 22:41:50 作者：

寫了幾年代碼，很少談到j(luò)avascript程序的執(zhí)行效率問題，今天就舉幾個(gè)例子看看，讓大家看看程序優(yōu)化是多么重要。這節(jié)來看看createElement和innerHTML的表現(xiàn)。看看差別是多大

第二講：同樣是createNode，再來看看執(zhí)行順序的差別

先創(chuàng)建子節(jié)點(diǎn)，再append到父節(jié)點(diǎn)：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript"> function init(){     var staDate = new Date();     var doc = window.document;     for(var i=0;i<100;i++){         var oDiv = doc.createElement("div");         var oTab  = doc.createElement("table");         var oTbody  = doc.createElement("tbody");         var oTr = doc.createElement("tr");         var oTd = doc.createElement("td");         var oText = doc.createTextNode("毛主席向全世界宣布：中華人民共和國(guó)從此成立了");                 oTd.appendChild(oText);         oTr.appendChild(oTd);         oTbody.appendChild(oTr);         oTab.appendChild(oTbody);         oDiv.appendChild(oTab);         container.appendChild(oDiv);         oDiv.id = "div_"+i;         oDiv.style.width = "400px";         oDiv.style.height = "20px";         oDiv.style.backgroundColor = "#eee";                       }     //alert(container.innerHTML);     alert(new Date - staDate); } </script> </HEAD> <BODY> <div   class="i2eg27y"   id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

先append到父節(jié)點(diǎn)，再創(chuàng)建子節(jié)點(diǎn)：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type="text/javascript"> function init(){     var staDate = new Date();     var doc = window.document;     for(var i=0;i<100;i++){         var oDiv = doc.createElement("div");         var oTab  = doc.createElement("table");         var oTbody  = doc.createElement("tbody");         var oTr = doc.createElement("tr");         var oTd = doc.createElement("td");         var oText = doc.createTextNode("毛主席向全世界宣布：中華人民共和國(guó)從此成立了");                         container.appendChild(oDiv);                                 oDiv.appendChild(oTab);                                 oTab.appendChild(oTbody);                                 oTbody.appendChild(oTr);                                 oTr.appendChild(oTd);                                 oTd.appendChild(oText);         oDiv.id = "div_"+i;         oDiv.style.width = "400px";         oDiv.style.height = "20px";         oDiv.style.backgroundColor = "#eee";                       }     //alert(container.innerHTML);     alert(new Date - staDate); } </script> </HEAD> <BODY> <div   class="x27qhoa"   id="container"></div> <input type="button" value="start" onclick="init();" /> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]