首页 > 编程语言> > javascript-仅在加载某些页面元素时进行测量

javascript-仅在加载某些页面元素时进行测量

2019-11-07 23:35:05 作者：互联网

我们使用Jiffy的修改版来衡量实际的客户端性能.

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

在某些页面上,我们拥有iframe元素,这些元素指向我们无法控制的外部网站-有时加载它们会花费很长时间.目前,仅在iframe完全加载后才触发我们页面的页面加载事件(并且它本身的加载事件会触发).

我想分开这些度量-在加载包括iframe在内的所有内容之后进行一次度量,但在不包含iframe的情况下进行一项度量-也就是说,如果没有iframe就会发生页面加载.

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

有任何想法吗？谢谢！

编辑：赏金已经结束,感谢您的帮助和想法！我选择Jed的答案是因为它给了我一个新主意-开始加载iframe,但是“暂停”它们,以免影响页面加载(通过临时设置src =“ about：blank”).我将尝试添加更详细的结果摘要.

解决方法:

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

>在身体加载之前将所有帧的src属性设置为about：blank,
>让身体负荷事件起火,
>添加一个onload处理程序以捕获每个帧的加载时间,然后
>将每个帧的src属性恢复为其原始值.

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

>需要在< / body>之前立即调用的init方法.标签,以及
>一种在页面加载时调用的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 onl oad="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,可以用更少的代码(也就不那么令人讨厌)完成此操作,但这是一种非常轻量级且无依赖的尝试.

标签：performance,javascript-events,client-side,javascript
来源： https://codeday.me/bug/20191107/2004019.html