如何爲圖像計算最長下載時間？

我想通過將src設置爲圖像，然後計算出錯時間需要多長時間來完成JavaScript。

我有一個圖像，將花費這麼長的時間來加載，他們會出錯。我通過試驗和錯誤瞭解網絡上的這些點，因此我可以將.src屬性指向該圖像並查看引發錯誤需要多長時間。

我知道如何使用捕獲錯誤：

window.addEventListener("error", function (event) { 
    if (event.target.tagName === 'IMG') { 
    } 
}, true);

但是我不知道時間需要多長時間拋出錯誤的最好方式。

來源

2014-02-16 return_of_the_drunken_coder

無論如何，你會如何處理這些信息？對於兩臺不同機器上的相同瀏覽器，它不一定是相同的，因爲在某些用戶可以配置此值。如果有代理人在場。這也可能會影響超時。 – CBroe

使用Date對象時發生錯誤的getTime函數來獲取一個開始和結束時間，再從終點減法，開始：

(function(){ 
    var img = document.createElement("img"); 
    var start =(new Date()).getTime(); 
    img.onerror = function(){ 
     var end = (new Date()).getTime(); 
     console.log("Took "+(end-start)+" milliseconds"); 
    }; 
    img.src = "http://someimageurl.com/someimage.jpg"; 
})();

來源

2014-02-16 00:46:56

我建議添加一個隨機的'？rand = xxxx'（其中'xxx'是隨機生成到URL的末尾，以確保瀏覽器的知識永遠不會被緩存。 – jfriend00

這很好，因爲我可以運行它但是，在控制檯中運行它之後，時間變化很大，不僅在瀏覽器中，而且在每次運行中都會變化很大， –

@ user3294399，就像jfriend00所說的那樣，使用緩存破壞方法來確保你不會接近即時的錯誤/成功，因爲瀏覽器會緩存url的響應，否則會有一些變化，因爲你必須考慮網絡速度，交通堵塞等 –

您還可以使用console.time({String})和console.timeEnd({String})：

console.time('some function'); 

someFunction(); 

console.timeEnd('some function'); 

// outputs ==> 7.624ms (or the like) in 
// Chrome, and by default, the number is 
// rounded in the Firefox console

由於瀏覽器緩存了JS，所以從第一次將腳本加載到後續測試中，您將看到很大的不同。另外，在我的系統中，每次測試的時間在1到5毫秒之間變化，因此您必須執行大量運行並獲得平均值。

來源

2014-02-16 00:55:48

如何爲圖像計算最長下載時間？

回答

相關問題