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 相关文章推荐
JavaScript中“+=”的应用
Feb 02 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP图片上传代码
2013/11/04 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python实现批量图片格式转换
2020/06/16 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python将数据插入数据库的代码分享
2020/08/16 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
个人思想理论学习的自我鉴定
2013/11/30 职场文书
班组长工作职责
2013/12/25 职场文书
农场厂长岗位职责
2013/12/28 职场文书
人力资源经理自我评价
2014/01/04 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书