代码之家 › 专栏 › 技术社区 › orip

仅加载某些页元素时进行测量

client-side javascript-events performance javascript

orip · 技术社区 · 15 年前

我们使用的是 Jiffy 测量实际的客户端性能。

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

在一些页面上我们有 iframe 指向我们无法控制的外部站点的元素-它们有时需要很长时间才能加载。目前,我们页面的页面加载事件仅在 伊夫拉姆 完全加载(它自己的加载事件激发)。

我想把这些测量分开-在所有东西包括 伊夫拉姆 是加载的,但也有一个没有 伊夫拉姆 -也就是说,如果没有 伊夫拉姆 .

到目前为止,我唯一能做到这一点的方法是添加 伊夫拉姆 在页面加载事件之后发送到DOM,但这会延迟iframe的加载。

有什么想法吗?谢谢!

编辑:赏金结束了,谢谢你的帮助和建议!我选择了jed的答案,因为它给了我一个新的想法-开始加载iframes,但是“暂停”它们,这样它们就不会影响页面加载(通过临时设置 src="about:blank" )我将尝试添加一个更详细的结果摘要。

4 回复 | 直到 15 年前

Jed Schmidt 15 年前

您可以通过以下方式为多个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
}

它为每个加载时间返回整数,但可以很容易地更改为只返回文档正文加载的diff。

下面是一个实际应用中的工作示例,使用这个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在更少的代码(也不那么突兀)中完成,但这是一个非常轻量级且无依赖性的尝试。

orip 15 年前

我对吉菲不熟悉本身 ,但在过去,我用一个粗略的定制函数进行了类似的测量,大致如下(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源的域如何,都可以工作,不需要修改内容)以进行另一个度量(通常我会使用adde添加这些事件)。VentListener/AttachEvent,但你知道这个想法)。

这为iframe提供了一个时间跨度,您可以从总数中减去这个时间跨度,从而合理地了解有iframe和没有iframe的加载时间。

高温高压

OderWat 15 年前

我不确定它是否有助于您:

作为jquery用户,在窗口的onload事件触发之前,我就已经执行了我的代码。

jquery的一个基本功能是允许在加载页面的DOM就绪后立即进行处理(请参见: jQuery Ready Event )

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

但我理解,这可能不足以满足您的情况,因为您希望在不加载iframes的情况下拥有“一切”的时间。如果从jquery ready处理程序中设置iframe源,我不确定窗口的onload事件会发生什么。我想它们将独立加载,但这需要检查。

在另一边…此就绪功能显示人们何时可以看到您的页面“正在构建”。图像和东西的加载对于人类的感知来说主要是次要的。这就是为什么Windows在一段时间内加载完成前显示桌面的原因:-)

BYK 15 年前

我将像奥德瓦特建议的那样建议“domready”事件,但有一个例外:您不需要jquery来实现这个事件。AT http://dean.edwards.name/weblog/2006/06/again/ 这对所有三种(实际上是4种)主要浏览器都有很好的解释。

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

希望它有帮助。