写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。
这节来看看createElement和innerHTML的表现。看看差别是多大
createElement:
运行代码框
<!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 oText = doc.createTextNode("text");
oDiv.appendChild(oText);
container.appendChild(oDiv);
oDiv.style.id = "div_"+i;
oDiv.style.width = "100px";
oDiv.style.height = "20px";
oDiv.style.backgroundColor = "#eee";
}
alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
innerHTML:
运行代码框
<!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 str="<div id=‘div_‘"+i+"‘ style=‘width:100px; height:20px;background-color:#eee‘>test</div>";
container.innerHTML += str;
}
alert(new Date - staDate);
}
</script>
</HEAD>
<BODY>
<div id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第二讲：同样是createNode，再来看看执行顺序的差别
先创建子节点，再append到父节点：
运行代码框
<!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("毛主席向全世界宣布：中华人民共和国从此成立了");
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 id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
先append到父节点，再创建子节点：
运行代码框
<!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("毛主席向全世界宣布：中华人民共和国从此成立了");
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 id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
第三讲，尽量用cloneNode代替createNode
还是看例子
用cloneNode：
运行代码框
<!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++){
if(container.childNodes.length>0){
var oDiv = container.lastChild.cloneNode(true);
oDiv.id="div_"+i;
container.appendChild(oDiv);
}else{
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("毛主席向全世界宣布：中华人民共和国从此成立了");
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 id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
用createNode：
运行代码框
<!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++){
//if(container.childNodes.length>0){
//var oDiv = container.lastChild.cloneNode(true);
//oDiv.id="div_"+i;
//container.appendChild(oDiv);
//}else{
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("毛主席向全世界宣布：中华人民共和国从此成立了");
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 id="container"></div>
<input type="button" value="start" onclick="init();" />
</BODY>
</HTML>