RSS订阅

详谈javascript程序优化问题

来源：cityvoice

2008-05-11 13:58:06 北京时间

中国站长网>站长学院>网页设计>Javascript>

【中国站长网－站长学院报道】

写了几年代码，很少谈到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>

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>