Question

我正在尝试测量图像加载时间的速度（图像在用户浏览器上以全分辨率完全加载的时间长度）。

我想知道window.performance JavaScript中的Performance Resource Timing是否适合这样做，如果你推荐它，或者你推荐别的东西（也最好是JavaScript，因为我希望它只是浏览器我希望人们也可以从不同的地方进行测试。

Answer 1

假设你有jquery

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

可替换地。

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

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

无论哪种方式，都必须对正在显示的图像进行处理，而不是对内存图像进行处理。在记忆中，它几乎是即时的。但是渲染和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>

或

<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>

请参阅实施https://jsfiddle.net/q4euntat/5/

测量图像加载时间：PerformanceResourceTiming

2 个答案: