3

我们使用Jiffy的修改版本来测量实际的客户端性能。

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

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

我想将这些测量分开 - 在iframe加载所有内容（包括.iframeiframe

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

有任何想法吗？

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

4

4 回答 4

3

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

  1. src将所有帧的属性设置为about:blank在身体加载之前，
  2. 让身体负荷事件触发，
  3. 添加一个onload处理程序来捕获每个帧的加载时间，然后
  4. 将每一帧的属性恢复src到其原始值。

我创建了一个frameTimer包含两种方法的模块：

  1. init需要在</body>标记之前立即调用的方法，以及
  2. 一种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 用更少的代码（并且不那么突兀）来完成，但这是一个非常轻量级且无依赖的尝试。

于 2009-05-01T06:34:17.917 回答
1

我对 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 之前立即记下日期戳，然后将事件处理程序添加到 iframe 的 onload 事件（无论 iframe 源的域如何，它都可以工作并且不需要修改内容）进行另一次测量（通常我会使用 addEventListener/attachEvent 添加这些事件，但你明白了）。

这为您提供了 iframe 的时间跨度，您可以从总数中减去，以便合理了解有无 if​​rame 的加载时间。

高温高压

于 2009-04-27T08:23:21.090 回答
0

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

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

这是 jQuery 的一项基本功能，允许在加载页面的 DOM 准备好后立即进行处理（请参阅：jQuery 就绪事件）

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

但是我知道这对于您的情况可能还不够，因为您希望在不加载 iframe 的情况下拥有“一切”的时间。如果您将 iframe 源设置在 jQuery 就绪处理程序之外，我不确定窗口的 onLoad 事件会发生什么。我猜他们会独立加载，但这需要检查。

另一方面......这个准备好的功能显示人们何时会看到您的页面“建立”。图像和内容的加载对于人类感知来说主要是次要的。这就是为什么windows在加载完成之前显示桌面一段时间:-)

于 2009-05-03T13:30:24.187 回答
0

我将建议 OderWat 建议的“domready”事件，但有一个例外：您不需要 jQuery 来实现此事件。在http://dean.edwards.name/weblog/2006/06/again/它对所有三个（实际上是 4 个）主要浏览器都有很好的解释。

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

希望能帮助到你。

于 2009-05-03T21:54:06.770 回答