基本的是,我,痴迷于跟踪我可以很容易的一切......想要跟踪图像加载时间。我不期望/渴望完美(例如,对于每个图像负载,它是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>
答案 0 :(得分:1)
这实际上取决于您正在做什么,但为什么不使用Google Chrome开发人员工具呢?网络选项卡可以很好地显示所有来自网络的内容,他们花了多少时间进行请求和转移......等等。
以下是此页面上的屏幕截图: