如何在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 中的开发工具，您可以准确地看到所有页面资源加载所需的时间。