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

  

复制代码 代码如下:
/* 获取渲染开始的时间戳, 保存在数组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 */