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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 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中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
Python字典及字典基本操作方法详解
2018/01/30 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
django删除表重建的实现方法
2019/08/28 Python
Python猴子补丁知识点总结
2020/01/05 Python
pyqt5中动画的使用详解
2020/04/01 Python
深入了解NumPy 高级索引
2020/07/24 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
农村葬礼主持词
2014/03/31 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015教师年度考核评语
2015/03/25 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
Python基础知识之变量的详解
2021/04/14 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers