javascript页面渲染速度测试脚本分享

 更新时间:2014年04月15日 08:31:04   作者:  
这篇文章主要介绍了javascript页面渲染速度测试脚本,计算浏览器渲染HTML页面所需要的时间,需要的朋友可以参考下

复制代码 代码如下:
/* 获取渲染开始的时间戳, 保存在数组PAGE_SPEED_TIME中 */
<html><script type="text/javascript">/*tag*/PAGE_SPEED_TIME = [new Date().getTime()];</script><head>
......
</head>

复制代码 代码如下:

......
/* 页面最末端,计算页面加载耗用的时间 */
</body>
<script src="http://ossweb-img.qq.com/images/js/pagespeed/page_speed_v2.js"></script></html>


下面来分析一下page_speed_v2.js文件的内容。对这个脚本进行重新格式化,以便更加方便阅读。

复制代码 代码如下:

/* 执行匿名函数构建对象PageSpeed */
;(function() {
    PageSpeed = {};/* 这里没有 var 关键字, 相当于引用的是 window.PageSpeed */

 /**
     * 绑定createScript方法
  *
  * @param String a script标签的src属性的值
  * @param String b script标签的id属性的值
  */
    PageSpeed.createScript = function(a, b) {
        var c = null;

        if (document.getElementById(b)) { /* script标签已经存在 */
            c = document.getElementById(b)
        } else { /* 不存在, 创建script标签 */
            c = document.createElement('script');
            var d = null;
            if (document.getElementsByTagName) {
                d = document.getElementsByTagName('head')[0] || document.documentElement;
            } else {
                d = document.documentElement;
            }
            d.insertBefore(c, d.firstChild); /* 调用insertBefore方法, 将新创建的script标签插入为第一个子元素 */
        }

  /* 这里的花括号起到代码片段分组功能 */
  {
            c.setAttribute('type', 'text/html');
            c.setAttribute('style', 'display:none;');
            c.setAttribute('charset', 'gb2312');
            c.setAttribute('id', b);
            c.setAttribute('src', a);
        }

        return c; /* 返回创建成功的script标签元素 */
    };

 /**
     * 绑定 submitDataForPageSpeed 方法
  *
  * @param Object a Map对象
  */
    PageSpeed.submitDataForPageSpeed = function(a) {
        var b = {
            'name': '',
            'rate': 0
        };
        b.name = a.name;
        b.rate = a.rate;

  /* a.PAGE_SPEED_TIME数组的最后一个元素减去第一个元素 */
        b['1'] = a.PAGE_SPEED_TIME[a.PAGE_SPEED_TIME.length - 1] - a.PAGE_SPEED_TIME[0];

        for (var i = 1; i < a.PAGE_SPEED_TIME.length - 1; i++) {
            b[(i + 1) + ''] = a.PAGE_SPEED_TIME[i] - a.PAGE_SPEED_TIME[0]
        }

  /* 提交速度测试结果的目的脚本 */
        var c = 'http://pagespeed-ied.qq.com/r.cgi';

  /* 遍历 b 数组的元素, 构建 query string */
        var d = [];
        for (var p in b) {
            d.push(p + '=' + b[p])
        }
        c += '?' + d.join('&');

  /* 创建script标签提交测速结果 */
        PageSpeed.createScript(c, 'submitForPageSpeed')
    };

 /**
  * 绑定 defaultSubmit 方法
  *
  */
    PageSpeed.defaultSubmit = function() {
        var a = '';
        try {
            a = location.host
        } catch(e) {}

        var b = {
            'name': a,
            'rate': 1,
            'PAGE_SPEED_TIME': []
        };

        if (!b.name) {
            return
        }

        if (! (typeof(PAGE_SPEED_TIME) == 'object' && PAGE_SPEED_TIME instanceof Array)) {
            return
        }

  /* 获取新的时间戳 */
        PAGE_SPEED_TIME.push(new Date().getTime());

        b.PAGE_SPEED_TIME = PAGE_SPEED_TIME;

  /*
   * 没看懂这里为啥需要一个新的变量 aaa, 直接使用 a 不可以么?
   * try ... catch 结构中使用的却是一个新的变量 aaaa 但后面却从未使用, 为何? 是否应该是 aaa?
   */
        var aaa = '';
        try {
            aaaa = location.host
        } catch(e) {}

        var c = Math.floor(Math.random() * 10000);

        if (aaa == "ktv.qq.com" || aaa == "ttd.qq.com" || aaa == "tian.qq.com" || aaa == "sura.qq.com" || aaa == "gw.tnt.qq.com" || aaa == "007.qq.com") {
            c = Math.floor(Math.random() * 1000);
        }

  /* 随机概率提交数据 */
        if (c <= b.rate * 1) {
            PageSpeed.submitDataForPageSpeed(b);
        }
    };

 /**
  * 绑定submit方法(用于CDN测速?)
  *
  * @param String a 名称
  */
    PageSpeed.submit = function(a) {
        var b = PageSpeed.cdn_page_speed_submitData;
        var c = {};
        for (var p in b) {
            c[p] = b[p]
        }
        c.name = a || c.name;
        PageSpeed.submitDataForPageSpeed(c);
    }
})();

try {
    /* 1秒后尝试提交数据 */
    setTimeout(function() {
        PageSpeed.defaultSubmit()
    },
    1000);
} catch(e) {}

/* 最后这段注释, 第二段是32位16进制数字, 应该是类似于 ETag 用于标记内容版本的 */
/*  |xGv00|ca82276cd78ac911d3d4310ba1408236 */

相关文章

  • uniapp项目使用防抖及节流的方案实战

    uniapp项目使用防抖及节流的方案实战

    防抖就是指触发事件后把触发非常频繁的事件合并成一次去执行,节流是指频繁触发事件时只会在指定的时间段内执行事件回调,即触发事件间隔大于等于指定的时间才会执行回调函数,这篇文章主要给大家介绍了关于uniapp项目使用防抖及节流的相关资料,需要的朋友可以参考下
    2023-01-01
  • Bootstrap与KnockoutJs相结合实现分页效果实例详解

    Bootstrap与KnockoutJs相结合实现分页效果实例详解

    KnockoutJS是一个JavaScript实现的MVVM框架。接下来通过本文给大家介绍Bootstrap与KnockoutJs相结合实现分页效果,对bootstrap knockoutjs相关知识感兴趣的朋友一起学习吧
    2016-05-05
  • JavaScript基础知识之方法汇总结

    JavaScript基础知识之方法汇总结

    本文给大家分享了javascript基础知识,包括数组的方法,函数的方法,数字的方法,对象的方法,字符串的方法,常规方法,正则表达式方法,本文介绍的非常详细,具有参考价值特此分享供大家参考
    2016-01-01
  • JS中如何将JSON数组转化为url参数

    JS中如何将JSON数组转化为url参数

    这篇文章主要介绍了JS中如何将JSON数组转化为url参数问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 一个js的tab切换效果代码[代码分离]

    一个js的tab切换效果代码[代码分离]

    看了此文(YUI实现的Tab 切换),有感而发,写了一个tab切换的函数,做学习之用。原生js实现,因为框架不好玩。
    2010-04-04
  • 基于Bootstrap下拉框插件bootstrap-select使用方法详解

    基于Bootstrap下拉框插件bootstrap-select使用方法详解

    这篇文章主要为大家详细介绍了基于Bootstrap下拉框插件bootstrap-select的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • uniapp开发微信小程序主包太大和vendor.js过大无法打包问题解决

    uniapp开发微信小程序主包太大和vendor.js过大无法打包问题解决

    最近工作一直在uniapp开发小程序这一块,相信很多开发者都遇到过代码体积太大无法打包的问题,这篇文章主要给大家介绍了关于uniapp开发微信小程序主包太大和vendor.js过大无法打包问题的解决办法,需要的朋友可以参考下
    2023-11-11
  • javascript canvas检测小球碰撞

    javascript canvas检测小球碰撞

    这篇文章主要为大家详细介绍了javascript canvas检测小球碰撞,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • webpack是如何实现模块化加载的方法

    webpack是如何实现模块化加载的方法

    这篇文章主要介绍了webpack是如何实现模块化加载的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • JavaScript选择排序算法原理与实现方法示例

    JavaScript选择排序算法原理与实现方法示例

    这篇文章主要介绍了JavaScript选择排序算法原理与实现方法,简单分析了选择排序算法的概念、原理并结合实例形式分析了JavaScript选择排序算法的相关实现技巧与操作注意事项,需要的朋友可以参考下
    2018-08-08

最新评论