我一直在玩新的性能。优化javascript API，对它们印象深刻。
这里的描述很好http://www.html5rocks.com/en/tutorials/webperformance/basics/
我有一个重要的用例，那就是我们需要制作一个简单的页面，世界各地的测试人员可以双击它，从我们的网站上从他们在世界各地的不同位置获得20个URL的性能。
我们的网站不是HTML5，所以我们不能直接在我们的页面中嵌入这样的东西（每月有10亿个页面，我们无论如何都不想要那么多数据）。因此，我的基本计划是一个简单的"包装器"HTML页面，其中包含在iframe中加载20个url的脚本。是的，我知道！iframes很烂，但这个东西不需要漂亮，只需要有效！
Javascript绝对不是我的强项！因此，我需要一些关于如何获得每个独立iframe的数据的帮助（当然，如果你有一个经过验证的方法，我有兴趣听到其他方法）。
给你一个关于它如何工作的非常简单的视图（我认为到目前为止只在Chrome和IE9中）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Performance Test</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var perf = performance.timing;
// Date / Time the page was requested
var navStart = perf.navigationStart;
// Redirection
var redStart = perf.redirectStart - navStart;
var redEnd = perf.redirectEnd - navStart;
// DNS Lookup
var dnsStart = perf.domainLookupStart - navStart;
var dnsEnd = perf.domainLookupEnd - navStart;
// TCP Connection
var tcpStart = perf.connectStart - navStart;
var tcpEnd = perf.connectEnd - navStart;
// Loading the response
var reqStart = perf.requestStart - navStart;
var loadStart = perf.responseStart - navStart;
var loadEnd = perf.loadEventStart - navStart;
// document.writeln("navStart = " + navStart);
// document.writeln("Redirect = " + redStart + "-" + redEnd);
document.write("DNS LOOKUP = " + dnsStart + "-" + dnsEnd + "ms<br>");
document.write("EST TCP CON = " + tcpStart + "-" + tcpEnd + "ms<br>");
document.write("LOADING RESPONSE = " + reqStart + "-" + loadStart + "ms<br>");
</script>
</body>
</html>
编辑：
使用@Mawi12345的想法，我正在尝试以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Performance Test</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var iFrame = $( '<iframe></iframe>' )
.attr( 'src', 'http://www.ikea.com')
.appendTo( $( 'body' ) );
console.log(iFrame[0].contentWindow.performance.timing);
});
$(function(){
var iFrame = $( '<iframe></iframe>' )
.attr( 'src', 'http://www.bbc.co.uk')
.appendTo( $( 'body' ) );
console.log(iFrame[0].contentWindow.performance.timing);
});
</script>
</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var iFrame = $( '<iframe></iframe>' )
.attr( 'src', 'http://www.google.com')
.css( 'display', 'none')
.appendTo( $( 'body' ) );
console.log(iFrame[0].contentWindow.performance.timing);
});
</script>
ps:performance.timing也适用于Firefox。
编辑：
请尝试iframe性能的新代码。计时测试：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
var timings = {};
$.each([
'http://bbc.co.uk',
'http://ikea.com',
'http://www.nasa.gov',
'http://google.com'], function(index, url){
var iFrame = $( '<iframe></iframe>' )
.attr( 'src', url)
.css('display', 'none')
.appendTo( $( 'body' ) );
var item = {
'frame': iFrame[0],
'timing': iFrame[0].contentWindow.performance.timing,
'status': 0,
'logged': 0
}
timings[url] = item;
iFrame.load(function(){
item.status = 1;
$('#log').trigger('check');
});
});
$('#log').bind('check', function(){
$.each(timings, function(url, item){
console.log(item);
if (item.status == 0 || item.logged) return;
item.logged = 1;
var timing = item.timing;
var navStart = timing.navigationStart;
var redStart = timing.redirectStart - navStart;
var redEnd = timing.redirectEnd - navStart;
var dnsStart = timing.domainLookupStart - navStart;
var dnsEnd = timing.domainLookupEnd - navStart;
var tcpStart = timing.connectStart - navStart;
var tcpEnd = timing.connectEnd - navStart;
var reqStart = timing.requestStart - navStart;
var loadStart = timing.responseStart - navStart;
var loadEnd = timing.loadEventStart - navStart;
$('#log').append($(
'<li><b>URL: ' + url + '</b><br />' +
'DNS LOOKUP = ' + dnsStart + '-' + dnsEnd + 'ms<br />' +
'EST TCP CON = ' + tcpStart + '-' + tcpEnd + 'ms<br />' +
'LOADING RESPONSE = ' + reqStart + '-' + loadStart + 'ms</li>'
));
});
});
});
</script>
</head>
<body>
<ul id="log"></ul>
</body>
</html>