我们使用 Jiffy 的修改版本衡量实际的客户端性能。
我们做的最重要的事情是测量从收到请求到在浏览器中触发页面加载事件之间的时间。
在某些页面上，我们有 iframe 元素指向我们无法控制的外部站点 - 它们有时需要很长时间才能加载。目前，我们页面的页面加载事件仅在 iframe 完全加载后触发(并且它自己的加载事件触发)。
我想分开这些测量 - 在包括 iframe 在内的所有内容都加载后进行一次测量，但在没有 iframe 的情况下进行一次测量 - 也就是说，当如果我们没有 iframe，页面加载就会发生。
到目前为止，我设法做到这一点的唯一方法是在页面加载事件之后将 iframe 添加到 DOM，但这会延迟 iframe 的加载。
有什么想法吗？
编辑:赏金结束，感谢您的帮助和想法!我选择 Jed 的回答是因为它给了我一个新想法——开始加载 iframe，但是“暂停”它们，这样它们就不会影响页面加载(通过临时设置 src="about:blank")。我会尝试添加更详细的结果摘要。
最佳答案
您可以通过以下方式实现多个 iframe 而无需动态添加它们:
- 设置
src所有帧的属性为about:blank在 body 负荷之前， - 让正文加载事件触发，
- 添加
onload处理程序捕获每个帧的加载时间，然后 - 恢复
src将每个帧的属性恢复为原始值。
我创建了一个 frameTimer包含两个方法的模块:
- 一个
init需要在</body>之前调用的方法标签，和 - 一个
measure在页面加载时调用的方法，该方法使用结果进行回调。
结果对象是这样的哈希:
{
iframes: {
'http://google.co.jp/': 1241159345061,
'http://google.com/': 1241159345132,
'http://google.co.uk/': 1241159345183,
'http://google.co.kr/': 1241159345439
},
document: 1241159342970
}
它为每个加载时间返回整数，但可以很容易地更改为只返回文档正文加载的差异。
这是一个实际的工作示例，使用这个 javascript 文件 ( frameTimer.js ):
var frameTimer = ( function() {
var iframes, iframeCount, iframeSrc, results = { iframes: {} };
return {
init: function() {
iframes = document.getElementsByTagName("iframe"),
iframeCount = iframes.length,
iframeSrc = [];
for ( var i = 0; i < iframeCount; i++ ) {
iframeSrc[i] = iframes[i].src;
iframes[i].src = "about:blank";
}
},
measure: function( callback ) {
results.document = +new Date;
for ( var i = 0; i < iframeCount; i++ ) {
iframes[i].onload = function() {
results.iframes[ this.src ] = +new Date;
if (!--iframeCount)
callback( results )
};
iframes[i].src = iframeSrc[ i ];
}
}
};
})();
和这个 html 文件(frameTimer.html):
<html>
<head>
<script type="text/javascript" src="frameTimer.js"></script>
</head>
<body onload="frameTimer.measure( function( x ){ alert( x.toSource() ) } )">
<iframe src="http://google.com"></iframe>
<iframe src="http://google.co.jp"></iframe>
<iframe src="http://google.co.uk"></iframe>
<iframe src="http://google.co.kr"></iframe>
<script type="text/javascript">frameTimer.init()</script>
</body>
</html>
这可以使用 jQuery 以更少的代码(并且不那么突兀)来完成，但这是一种非常轻量级且无依赖性的尝试。
关于javascript - 仅加载某些页面元素时进行测量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/777770/