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页面渲染速度测试脚本分享
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@