Question

基本的是，我，痴迷于跟踪我可以很容易的一切......想要跟踪图像加载时间。我不期望/渴望完美（例如，对于每个图像负载，它是100％准确，低至毫秒）。目标是相对准确性（例如，如果在上午10点到11点之间，平均值是100毫秒的加载时间。几个小时之后突然开始飙升到平均3秒，我想知道那种事情。）

如果这个解决方案足够吗？还是我错过了一些明显的东西？

是的，我知道它不报告任何地方......这不是示例代码的目的，它只是计算时间。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Image Timing Test Page</title>
</head>
<body style='background-color: black; color: white;'>
This is a page.

<div class='test' id='t1'>
    <img id="1" src='/test.jpg' />
</div>

<div class='test' id='t2'>
    <img id='2' src='/test2.jpg' />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.imagesloadded.js" type="text/javascript"></script> <!-- https://github.com/desandro/imagesloaded -->
<script>

var Performance = window.performance.timing;

function ImageLoadTime(ImageTime, id)
{
    if(Performance.loadEventEnd > 0)
    {       
        console.log("Image Load Time ["+id+"] " + (ImageTime-Performance.navigationStart) + " milliseconds");
    }
    else
    {
        setTimeout(function(){ImageLoadTime(ImageTime, id)},250);
    }
}

$(document).ready(function() {
    $('.test').each(function(index) 
    {
        var temp = $(this).attr('id');
        $(this).imagesLoaded( function( $images ) 
        {
            var d = new Date();
            ImageLoadTime(d.getTime(), temp);   
        });
    });
});

</script>
</body>
</html>

Answer 1

这实际上取决于您正在做什么，但为什么不使用Google Chrome开发人员工具呢？网络选项卡可以很好地显示所有来自网络的内容，他们花了多少时间进行请求和转移......等等。

以下是此页面上的屏幕截图：

enter image description here

这是相对基准图像加载时间的可行方法吗？

1 个答案: