javascript頁面渲染速度測試指令碼分享

最後更新：2014-04-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下:/* 擷取渲染開始的時間戳記, 儲存在數組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 */

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

javascript頁面渲染速度測試指令碼分享

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support