Javascript 这是一种相对基准测试映像加载时间的可行方法吗？_Javascript_Jquery_Html_Jquery Plugins_Benchmarking

Javascript 这是一种相对基准测试映像加载时间的可行方法吗？

javascript jquery html jquery-plugins

Javascript 这是一种相对基准测试映像加载时间的可行方法吗？,javascript,jquery,html,jquery-plugins,benchmarking,Javascript,Jquery,Html,Jquery Plugins,Benchmarking,最基本的事情是，我沉迷于跟踪所有我能轻松做到的事情…想要跟踪图像加载时间。我不期望/渴望完美（例如，对于每个图像加载，它都是100%精确的，精确到毫秒）。目标是相对准确度（例如，如果在上午10点到11点之间，平均加载时间是100毫秒。几小时后，它突然开始达到平均3秒，我想知道这类事情）你认为这个解决方案是否足够？还是我错过了一些明显的东西是的，我知道它不会在任何地方报告任何内容……这不是示例代码的目的，它只是计算时间示例代码： <!DOCTYPE html> <html&

最基本的事情是，我沉迷于跟踪所有我能轻松做到的事情…想要跟踪图像加载时间。我不期望/渴望完美（例如，对于每个图像加载，它都是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>


图像定时测试页
这是一页。
var性能=window.Performance.timing；
函数ImageLoadTime（ImageTime，id）
{
如果（Performance.loadEventEnd>0）
{       
log（“映像加载时间[“+id+”]”“+（ImageTime性能.navigationStart）+“毫秒”）；
}
其他的
{
setTimeout（函数（）{ImageLoadTime（ImageTime，id）}，250）；
}
}
$（文档）.ready（函数（）{
$（'.test'）。每个（函数（索引）
{
var temp=$（this.attr（'id'）；
$（此）.imagesLoaded（函数（$images）
{
var d=新日期（）；
ImageLoadTime（d.getTime（），temp）；
});
});
});

这实际上取决于你在做什么，但为什么不使用谷歌Chrome开发者工具来实现呢？“网络”选项卡可以很好地显示通过网络传输的所有信息、请求和传输所用的时间等

以下是本页的屏幕截图：

它的全部目的是能够看到除我之外的其他人得到了什么结果。它也不会让我看到结果随时间的变化，这就是它的全部价值。在大于“一页加载”的时间段内查看真实世界的结果。