javascript页面渲染速度测试脚本分享_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 */

时间: 2024-10-02 11:43:19

javascript页面渲染速度测试脚本分享_javascript技巧的相关文章

Javascript加载速度慢的解决方案_javascript技巧

通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度倍增. 把通常加载方式: 复制代码 代码如下: <script src="xxxx.js"></script> 改变成: 复制代码 代码如下: <script type="text/javascript"> document.writ

JavaScript 实现的checkbox经典实例分享_javascript技巧

JavaScript 实现的checkbox经典实例分享 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>邮件删除</title> <style type="text/css"> *{ margin: 0; padding: 0; } table{ width: 400px; margin-left:200px;

一波JavaScript日期判断脚本分享_javascript技巧

1.比较两个日期先后 var x = new Date('2015-05-25'); var y = new Date('2015-05-25'); if (x.getTime() == y.getTime()) { It'll be true; } 2.是否在两个日期之间   var beforeSpringDate, afterSpringDate; for (var i = 0; i < springFestivalDays.length; i++) { beforeSpringDate

使用PHP+JavaScript将HTML页面转换为图片的实例分享_javascript技巧

1,准备要素 1)替换字体的js文件 js代码: function com_stewartspeak_replacement() { /* Dynamic Heading Generator By Stewart Rosenberger http://www.stewartspeak.com/headings/ This script searches through a web page for specific or general elements and replaces them wi

javascript跨域原因以及解决方案分享_javascript技巧

产生跨域问题的原因 跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性. 跨域问题产生的场景 当要在在页面中使用js获取其他网站的数据时,就会产生跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时以及hybrid app中请求数据,浏览器就会提示以下错误.这种场景下就要解决js的跨域问题. XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header

Javascript继承机制的设计思想分享_javascript技巧

我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样

Javascript模拟加速运动与减速运动代码分享_javascript技巧

加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外一个元素的距离,如xxx.style.left或xxx.style.marginLeft,然后每次运动后都使速度增加,这样加速运动的效果就出现了,减速运动是同样的道理. 下面是两个示例: 加速运动 复制代码 代码如下: <!DOCTYPE html> <html> <head&g

javascript修改表格背景色实例代码分享_javascript技巧

复制代码 代码如下: <html> <script> //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) {      var sTable = document.getElementById("ServiceListTable")      for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行      {        

javascript 页面只自动刷新一次_javascript技巧

1.看看下面这段代码 复制代码 代码如下: <Script> function reurl(){ url = location.href; //把当前页面的地址赋给变量 url var times = url.split("?"); //分切变量 url 分隔符号为 "?" if(times[1] != 1){ //如果?后的值不等于1表示没有刷新 url += "?1"; //把变量 url 的值加入 ?1 self.locatio