测量图像加载时间：PerformanceResourceTiming

Question

I'm trying to measure the speed of the load time of an image (how long it actually takes the image to fully load at full resolution on a user's browser). 我正在尝试测量图像加载时间的速度（在用户浏览器上以完全分辨率完全加载图像实际需要多长时间）。

I was wondering if the Performance Resource Timing in the window.performance JavaScript was good for doing this, if you recommend it, or if you recommend something else (also preferably JavaScript because I'd like this to be browser-only as I'd like people to test it from different locations as well). 我想知道window.Performance JavaScript中的Performance Resource Timing是否适合这样做，如果您推荐它，或者您推荐其他东西（最好还是JavaScript，因为我希望这是仅限浏览器使用，例如人们也可以从不同的位置对其进行测试）。

Answer 1

Assuming you have jquery 假设你有jQuery

var startTime = +new Date();
$("#img").attr({"src": imgURI});
var endTime = +new Date();
var finalTime=endTime - startTime;

Alternatively. 另外。

var tempImg=getElementById("img");
var startTime = +new Date();
var endTime;
var finalTime;

tempImg.onload = function () {
    endTime = +new Date();
    finalTime=endTime - startTime
}
tempImg.src = imgURI;

Either way it has to be done to an image that is being displayed, not to an in memory image. 无论哪种方式，都必须对正在显示的图像而不是内存图像进行。 In memory it will be almost instant. 在内存中，这几乎是瞬间的。 But there is a delay in rendering and DOM recalculations that you would want to factor in to your calculations. 但是在渲染和DOM重新计算方面存在延迟，您希望将其纳入计算范围。

Answer 2

<body onload="loadResources()">
    <script>
        function loadResources()
        {
           var start = new Date().getTime();
           var image1 = new Image();
           var resourceTiming = function() {
               var now = new Date().getTime();
               var latency = now - start;
               alert("End to end qresource fetch: " + latency);
           };

           image1.onload = resourceTiming;
           image1.src = 'https://yourwebsite/Icons/image.png';
        }
    </script>
    <img src="https://yourwebsite/Icons/image_2.png">
  </body>

or 要么

<body onload="loadResources()">
    <script>
       function loadResources()
       {
          var image1 = new Image();
          image1.onload = resourceTiming;
          image1.src = 'https://yourwebsite/Icons/image.png';
       }

       function resourceTiming()
       {
           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].startTime);
              }
           }
       }
    </script>
    <img id="image0" src="https://yourwebsite/Icons/image_2.png">   </body>

Please refer the implementation https://jsfiddle.net/q4euntat/5/ 请参考实施https://jsfiddle.net/q4euntat/5/

测量图像加载时间：PerformanceResourceTiming

问题描述

2 个解决方案

解决方案1
0 2017-05-12 18:21:34

解决方案2
0 2017-05-12 18:32:35

测量图像加载时间：PerformanceResourceTiming

问题描述

2 个解决方案

解决方案1 0 2017-05-12 18:21:34

解决方案2 0 2017-05-12 18:32:35

解决方案1
0 2017-05-12 18:21:34

解决方案2
0 2017-05-12 18:32:35