javascript页面渲染速度测试脚本分享
javascript页面渲染速度测试脚本分享
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/*获取渲染开始的时间戳,保存在数组PAGE_SPEED_TIME中*//*tag*/PAGE_SPEED_TIME=[n...

复制代码 代码如下:/* 获取渲染开始的时间戳, 保存在数组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教程学习
编程开发子分类