Question

我们使用Jiffy的修改版本来衡量实际的客户端效果。

我们做的最重要的事情是衡量收到请求和浏览器中页面加载事件触发之间的时间。

在某些网页上，我们有iframe个元素指向我们无法控制的外部网站 - 它们有时需要很长时间才能加载。目前，只有在iframe完全加载（并且它自己的加载事件触发）之后，页面的页面加载事件才会触发。

我想将这些测量结果分开 - 在加载iframe的所有内容后进行一次测量，还有一次没有iframe的测量 - 也就是说，当页面加载发生时我们没有iframe。

到目前为止，我设法做到这一点的唯一方法是在页面加载事件后将iframe添加到DOM，但这会延迟加载iframe。

有什么想法吗？谢谢！

编辑：赏金结束了，感谢您的帮助和想法！我选择了Jed的答案，因为它给了我一个新的想法 - 开始加载iframe，但“暂停”它们以便它们不会影响页面加载（暂时设置src="about:blank"）。我将尝试添加更详细的结果摘要。

Answer 1

您可以为多个iframe实现此目的，而无需通过以下方式动态添加：

在正文加载之前将所有框架的src属性设置为about:blank，
让身体加载事件开火，
添加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可以用更少的代码（而且不那么突兀）来完成，但这是一个非常轻量级且无依赖性的尝试。

Answer 2

我对jiffy 本身并不熟悉，但过去我使用粗略的定制函数进行了类似的测量，大致相似（从记忆中输入5分钟）：

<html>
    <head>
        <script>
        var timer = {
            measure:    function(label)
                        {
                            this._timings[label] = new Date();
                        },
            diff:        function(a,b)
                        {
                            return (this._timings[b] - this._timings[a]);
                        },
            _timings: {}
        }
        </script>
    </head>
    <body onload="alert(timer.diff('iframe.start','iframe.done'));">
        <!-- lorem ipsum etc -->
        <script>timer.measure('iframe.start');</script>
        <iframe src="http://www.google.com" onload="timer.measure('iframe.done');"/>
        <!-- lorem ipsum etc -->
    </body>
</html>

从中你可以看到相关部分只是在遇到iframe之前注意一个日期戳，然后向iframes的onload事件添加一个事件处理程序（无论iframe源的域是什么，它都会起作用，并且不会不需要修改内容）进行另一次测量（通常我会用addEventListener / attachEvent添加这些事件，但你明白了）。

这为您提供了iframe的时间跨度，您可以从总数中减去这个时间段，让您对使用和不使用iframe的加载时间有一个合理的了解。

HTH

Answer 3

我不确定它是否会对你有所帮助：

作为jQuery用户，我在窗口的onLoad事件发生前很久就执行了我的代码。

只要加载页面的DOM准备就绪，jQuery的基本功能就是允许处理（参见：jQuery Ready Event）

然后，我可以为每个可能完成“稍后”加载的元素添加事件处理程序，包括iframe。

但是我知道这对你的情况来说可能还不够，因为你想把“一切”的时间安排为没有加载iframe。如果你将iframe源设置为jQuery ready处理程序，我不确定窗口的onLoad事件会发生什么。我猜他们会独立加载但需要检查。

另一方面......这个准备好的功能显示人们何时会看到你的页面“累积”。对于人类的感知，图像和内容的加载大多是次要的。这就是为什么Windows在现在加载一段时间之前显示桌面的原因： - ）

Answer 4

我会建议“domready”事件，因为OderWat提出了一个例外：你不需要jQuery来实现这个事件。在http://dean.edwards.name/weblog/2006/06/again/，对于所有三个（实际上是4个）主要浏览器都有很好的解释。

实际上，如果您在特定浏览器上运行测试，则可以更轻松地实现此事件以进行跟踪。

希望它有所帮助。

测量何时仅加载某些页面元素

4 个答案: