Javascript 测量图像加载时间：PerformanceResourceTiming_Javascript_Performance

Javascript 测量图像加载时间：PerformanceResourceTiming

javascript performance

Javascript 测量图像加载时间：PerformanceResourceTiming,javascript,performance,Javascript,Performance,我试图测量图像加载时间的速度（在用户浏览器上以全分辨率加载图像实际需要多长时间）我想知道window.Performance JavaScript中的性能资源计时是否有助于实现这一点，如果您推荐它，或者您是否推荐其他东西（也最好是JavaScript，因为我希望它仅作为浏览器，因为我希望人们也能从不同的位置对它进行测试）。假设您有jquery var startTime = +new Date(); $("#img").attr({"src": imgURI}); var endTime =

我试图测量图像加载时间的速度（在用户浏览器上以全分辨率加载图像实际需要多长时间）

我想知道window.Performance JavaScript中的性能资源计时是否有助于实现这一点，如果您推荐它，或者您是否推荐其他东西（也最好是JavaScript，因为我希望它仅作为浏览器，因为我希望人们也能从不同的位置对它进行测试）。

假设您有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重新计算过程中会出现延迟，您可能希望将其纳入计算中。


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

函数loadResources（）
{
var start=new Date（）.getTime（）；
var image1=新图像（）；
var resourceTimming=函数（）{
var now=new Date（）.getTime（）；
var latency=now-start；
警报（“端到端qresource获取：”+延迟）；
};
image1.onload=资源定时；
image1.src=https://yourwebsite/Icons/image.png';
}

或


函数loadResources（）
{
var image1=新图像（）；
image1.onload=资源定时；
image1.src=https://yourwebsite/Icons/image.png';
}
函数resourceTiming（）
{
var resourceList=window.performance.getEntriesByType（“资源”）；
对于（i=0；i


请参阅实现您能否解释有关DOM重新计算和渲染延迟的更多信息？另外，我假设这是一个显示的图像，因为它是一个为访问者加载的网站。基本上，如果图像标签的大小和宽度没有明确说明，那么当图像加载时，DOM必须重新调整所有内容以使其适合。这会导致重新计算，特别是在移动设备上，可能需要很长时间。在移动设备上，您还可以看到图像显示时的延迟，尤其是base64图像。这个延迟可能没有那么关键，但是如果您希望端到端地测量它，那么可能应该考虑它。当我在JSFIDLE之外的自己的测试中运行此代码时，它在第一次运行时总是给出0.00，然后在缓存映像后开始以毫秒为单位显示负载。思想？
<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>