如何在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上实现它。