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


Posted in Javascript onApril 15, 2014
/* 获取渲染开始的时间戳, 保存在数组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 */
Javascript 相关文章推荐
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
JS实现静止元素自动移动示例
Apr 14 #Javascript
js 获取元素下面所有li的两种方法
Apr 14 #Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 #Javascript
jquery使用jxl插件导出excel示例
Apr 14 #Javascript
js 获取input点选按钮的值的方法
Apr 14 #Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 #Javascript
Js实现动态添加删除Table行示例
Apr 14 #Javascript
You might like
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
超清晰的document对象详解
2007/02/27 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JS 控件事件小结
2012/10/31 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python 内置函数complex详解
2016/10/23 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
初中生评语大全
2014/04/24 职场文书
博士生求职信
2014/07/06 职场文书
软件测试专业推荐信
2014/09/18 职场文书
生日答谢词
2015/01/05 职场文书
大学生村官个人总结
2015/02/15 职场文书