首页 > 编程语言> 文章详细

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

2019-11-07 23:35:05 阅读：228 来源： 互联网

标签：performance javascript-events client-side javascript

我们使用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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