2011-06-14 55 views
1

我有這樣一段代碼:我的腳本需要12秒才能運行,但後來確切的腳本需要50毫秒才能運行?

<!DOCTYPE html><html><head> 
<style>button{disabled:true;}</style> 
<script> 
var d; 
function when_loaded(){ 
    d=document.getElementById("d"); 
    //adding nested elements to d using different methods 
    //basically just simulating a real situation 
    document.title="loading.."; 
    for(var x=0;x<3500;++x){ 
     d.appendChild(document.createElement("div")); 
     d.appendChild(document.createElement("div")).innerHTML = "asd"; 
     d.appendChild(document.createElement("div")).innerHTML = "<a href='#'>zxc</a><div>qwe</div>"; 
     d.appendChild(document.createElement("span")).innerHTML = "asd"; 
     d.appendChild(document.createElement("div")).appendChild(document.createElement("span")).appendChild(document.createElement("span")); 
    } 
    document.title="loading done"; 
    var del=document.getElementById("del"); 
    var del2=document.getElementById("del2"); 
    del.style.disabled=del2.style.disabled="false"; 
} 

function del(){ 
    document.title="deleting"; 
    var a=new Date().getTime(); 
    d.innerHTML=""; 
    var b=new Date().getTime(); 
    document.title="deleted"; 
    alert(b-a+" milli seconds taken"); 
    document.body.innerHTML="you can refresh the page now and try the other button"; 
} 

function del2(){ 
    document.title="deleting"; 
    var a=new Date().getTime(); 
    var c; 
    while(c=d.firstChild){ 
     d.removeChild(c); 
    } 
    var b=new Date().getTime(); 
    document.title="deleted"; 
    alert(b-a+" milli seconds taken"); 
    document.body.innerHTML="you can refresh the page now and try the other button"; 
} 
</script> 
</head><body onload="when_loaded();"> 
<button id="del" onclick="del();">del</button> 
<button id="del2" onclick="del2();">del2</button> 
<div id="d"></div> 
</body></html> 

出於某種原因,當我跑的代碼在第一時間(在Chrome在Windows Vista Home Premium操作系統),然後按第二個按鈕,花了12秒運行該腳本。

但之後,我試圖複製我的情況。現在只需要50毫秒。

我關閉了瀏覽器並重新打開它,它仍然是50毫秒。

我重新啓動了電腦..它仍然是50毫秒。

所以我的問題是沒有人知道是什麼導致異常發生,我如何複製異常?

唉,可能有人測試出的第二個按鈕和後需要多長時間(0.05秒,12秒)

+0

您可能對[jsperf.com](http://jsperf.com)感興趣,它允許您發佈性能測試並從大量訪問者收集統計數據。 – Pointy 2011-06-14 14:07:02

+4

很難說出什麼可能會導致這種差異,但由於第一次運行後的所有運行都是50毫秒,因此第一次運行可能是僥倖,或者是有另一個應用程序使用cpu並導致腳本運行緩慢。 – joekarl 2011-06-14 14:08:56

+1

我看到時間在50-60毫秒範圍內,在Chrome中打開約10個標籤頁。當時你的機器上還有其他事情嗎?例如,如果另一個進程正在耗盡內存或佔用處理器,也許你看到了這種滯後的結果?既然你重新啓動了,也許你看到了分頁的結果? – ajm 2011-06-14 14:11:08

回答

1

如果它只花了12秒一次,再也不用,那麼就把它放到第一次佔用CPU的其他應用程序。

+0

heys也發佈你的結果..需要多長時間? – Pacerier 2011-06-14 16:11:54

+0

第二個按鈕對我來說總是需要47-65ms(在Windows 7/Chrome 12和Ubuntu/Chrome 11上試用)。但是,在Windows中,頁面本身在顯示按鈕之前一直持續10秒。 (在Ubuntu中只需要2秒鐘)。 – 2011-06-16 08:47:14

1

你不應該添加元素的DOM在for循環中。它一直不停地重新繪製頁面,導致性能下降。

您應該創建一個新的元素作爲包裝。將所有新元素附加到此元素。循環完成後,將其附加到頁面上。

相關問題