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 相关文章推荐
JS定义网页表单提交(submit)的方法
Mar 20 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
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 日期加减的类,很不错
2009/10/10 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
php 基础函数
2017/02/10 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
layui表格实现代码
2017/05/20 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
python获取图片颜色信息的方法
2015/03/18 Python
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
一年级班主任寄语
2014/01/19 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
教师党员一句话承诺
2014/03/28 职场文书
买卖协议书范本
2014/04/21 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
关于责任的演讲稿
2014/05/20 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android