再看看这个<form id=form1 name=form1><input id=txt name=txt></form><button onclick=test()>测试</button>
<div id=div1></div>
<script>
var count=1000;
var i=0;
var obj=null;function test(){
slow();
fast();
}function slow(){
var d=new Date();
for(i=0;i<count;i++){
document.form1.txt.style.display=(i%2)?"block":"none"
}
div1.innerHTML=div1.innerHTML+String(new Date()-d)+" "
}
function fast(){
var d=new Date();
var css=document.form1.txt.style.display
for(i=0;i<count;i++){
css=(i%2)?"block":"none"
}
div1.innerHTML=div1.innerHTML+String(new Date()-d)+"<br>"
}
</script>
<div id=div1></div>
<script>
var count=1000;
var i=0;
var obj=null;function test(){
slow();
fast();
}function slow(){
var d=new Date();
for(i=0;i<count;i++){
document.form1.txt.style.display=(i%2)?"block":"none"
}
div1.innerHTML=div1.innerHTML+String(new Date()-d)+" "
}
function fast(){
var d=new Date();
var css=document.form1.txt.style.display
for(i=0;i<count;i++){
css=(i%2)?"block":"none"
}
div1.innerHTML=div1.innerHTML+String(new Date()-d)+"<br>"
}
</script>
function table1(){
var d=new Date();
var tr=null;
var td=null;
for(i=0;i<count;i++){
tr=tbl1.insertRow()
td=tr.insertCell()
//tr.appendChild(td)
td.innerHTML="gorush"
}
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"秒 "
}
你多做了一步完全不必要的 tr.appendChild(td),速度慢了大约5、6倍。去掉后1和2的速度没有很大差异。
<script>
var count=1000;
var i=0;
function create(){
table1()
table2()
table3()
table4()
}function table1(){
var d=new Date();
var tr=null;
var td=null;
for(i=0;i<count;i++){
tr=tbl1.insertRow()
td=tr.insertCell()
td.innerHTML="gorush"
}
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"秒 "
}function table2(){
var d=new Date();
var tr=null;
var td=null;
var tbody=tbl2.firstChild;
for(i=0;i<count;i++){
tr=document.createElement("TR")
td=document.createElement("TD")
tbody.appendChild(tr)
tr.appendChild(td)
td.innerHTML="gorush"
}
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"秒 "
}function table3(){
var d=new Date();
var tr=null;
var tbody=tbl3.firstChild;
var oldtr=tbody.firstChild;
for(i=0;i<count;i++){
tr=oldtr.cloneNode(true)
tbody.appendChild(tr)
}
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"秒 "
}
function table4(){
var d=new Date();
var ar = [];
var st="<tr><td>gorush</td></tr>"
for(i=0;i<count;i++){
ar[i] = st
}
tbl4.parentNode.innerHTML=tbl4.outerHTML.replace(/<\/table>/i,"")+ar.join("")+"</table>";
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"秒 <br>"
}</script><button onclick=create()>create table</button>
<div id=div2 style="font-size:12px"> </div><table id=tbl1 border style="display:inline">
<tbody>
<tr><td>gorush</td></tr>
</tbody>
</table><table id=tbl2 border style="display:inline">
<tbody>
<tr><td>gorush</td></tr>
</tbody>
</table><table id=tbl3 border style="display:inline">
<tbody>
<tr><td>gorush</td></tr>
</tbody>
</table>
<span>
<table id=tbl4 border style="display:inline">
<tbody>
<tr><td>gorush</td></tr>
</tbody>
</table>
</span>
</BODY>
var d=new Date();
var ar = [tbl5.outerHTML.replace(/<\/table>/i,"")];
var st="<tr><td>gorush</td></tr>"
for(i=1;i<count-1;i++){
ar[i] = ""
}
ar[count]="</table>"
tbl5.parentNode.innerHTML=ar.join(st);
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"秒 "
}
方法我如果碰到嵌套TABLE是就會出錯﹐所以我認為應該修正一下
var ar = [tbl5.outerHTML.replace(/<\/table>$/i,"")];
/<\s*\/table\s*>$/i
function table5(){
var d=new Date();
var ar = new Array(count+1);
var st="<tr><td>gorush</td></tr>"
tbl5.parentNode.innerHTML=tbl5.outerHTML.replace(/<\/table>/i,"")+ar.join(st)+"</table>";
div2.innerHTML=div2.innerHTML+String(new Date()-d)+"Ãë <br>"
}对换测试顺序后发现,排在前面的测试比较占便宜。
这样可读性就。我的代码的那几种方法都还算常规的啦
<input id=t>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(t.style.display.constructor)
//-->
</SCRIPT>
</BODY>所以var css=document.form1.txt.style.display只是复制了display串得到一个新的串。然后你不停的改新的串的内容,对style对象一点影响都没有。
var css=document.form1.txt.style
for(i=0;i<count;i++){
css.display=(i%2)?"block":"none"
}
发贴的时候觉得可以写得更进一步,结果写错了(我居然没有细加测试,晕)这个代码只是说明一个问题。把对象缓存为局部变量,操作起来会快很多