Javascript 如何计算图像的最大下载时间？

。。。适用于不同的浏览器

我想通过将src设置为图像，然后计时出错所需的时间，在JavaScript中实现这一点

我有一个图像，这将需要很长时间来加载，他们会出错。我通过反复试验了解web上的这些点，因此我可以将.src属性指向此图像，并查看抛出错误需要多长时间

我知道如何使用以下方法捕捉错误：

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

---

但是，我不知道计算抛出错误所需时间的最佳方法。

使用Date objects 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";
})();

---

您还可以使用

console.time（{String}）

和

console.timeEnd（{String}）

：

---

您将看到与第一次将脚本加载到后续测试时有很大的不同，因为浏览器缓存JS。此外，在我的系统上，每次测试的时间从1到5毫秒不等，因此您必须进行大量运行并获得平均值。

您希望如何处理这些信息？对于两台不同机器上的同一浏览器，它不一定相同，因为在某些情况下，用户可以配置此值。如果有代理的话。这可能也会影响超时。我建议添加一个随机的

？rand=xxxx

（其中，

xxx

被随机生成到URL的末尾，以确保浏览器对它的了解永远不会被缓存。这很好，因为我可以在控制台中运行它。但是，在控制台中运行它之后，时间变化很大，不仅在浏览器之间，而且每次运行的时间都不同。@user3294399，就像jfriend00所说的，使用缓存buster me方法确保你不会立即出错/成功，因为浏览器会缓存url的响应。否则会有一些差异，因为你必须考虑网络速度、交通拥堵等因素，这将有助于使读数正常化，我通常只使用时间戳，它不必是随机的，它只需要我只是用开始时间。

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