如何在JavaScript中計算圖像加載/渲染時間？

Question

有什麼方法可以在使用javascript/jquery的網頁中查找圖像加載/渲染時間？

Answer 1

這裏的正確答案是使用Chrome或Firefox/Firebug等瀏覽器內置的開發工具，它會告訴您頁面中的所有資源需要加載多長時間。這些工具可以訪問純JavaScript可以訪問的更多信息。

使用javascript，您可以精確計時加載使用javascript指定的圖像。您無法使用JavaScript來精確計時加載HTML中指定的圖像，因爲在圖像開始加載的瞬間沒有精確的方式來啓動javascript時間測量。

要時刻的圖像在JavaScript中指定：

var startTime = new Date().getTime(); 
var img = new Image(); 
img.onload = function() { 
    var loadtime = new Date().getTime() - startTime; 
    console.log("image took " + loadtime + "ms to load"); 
}; 
img.src = "http://www.whatever.com/testimg.jpg"; 

，你可以在HTML中指定的圖像做的最好的應該是這樣：

<script> 
var startTime = new Date().getTime(); 
function doneLoading() { 
    var loadtime = new Date().getTime() - startTime; 
    console.log("image took " + loadtime + "ms to load"); 
};  
</script> 
<img src="http://www.whatever.com/testimg.jpg" onload="doneLoading()"> 

前面例子中的<script>標籤需要緊接在<img>標記之前。

但嚴重的是，使用Chrome或Firebug中的開發工具，您可以準確瞭解所有頁面資源加載的時間。

Answer 2

var resourceList = window.performance.getEntriesByType("resource"); 
      for (i = 0; i < resourceList.length; i++) 
      { 
       if (resourceList[i].initiatorType == "img") 
       { 
       alert("End to end resource fetch: "+ (resourceList[i].responseEnd - resourceList[i].responseStart)); 
       } 
      } 

https://jsfiddle.net/q4euntat/5/

您可以參考上面的鏈接，實現它的jsfiddle。