JavaScript 網頁連線速度測試‏

使用 JavaScript 測試某個網站的連線速度，可以使用 img 元素，實際載入一張圖片，利用 img 元素的 onload 來得知載入總共花了多少時間，onerror 則可以得知載入失敗。

下面的範例，按「測速」按鈕後，會即時建立一個 img 元素，並指定 onload、onerror 時要執行的程式，也記錄開始的時間，然後開始載入網站的 speed.gif 圖片。

若 speed.gif 載入完成，則可以用「speed.gif檔案大小 / 所花時間」來計算網路速度。不過下面的範例，我只想大概知道 request 時，去與回來的反應時間，所以 speed.gif 放很小的檔案，反應時間我就直接結束時間減開始時間。

JavaSript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
    var obj_n;
    var start_time;
    var picLoad = function() {
        var end_time = new Date().getTime(); // 結束時間
        var pass_time = (end_time - start_time) + ' 毫秒';
        $('.speed').eq(obj_n).html(pass_time);
        nextTest();
    };
    var picError = function() {
        $('.speed').eq(obj_n).html("無法連結");
        nextTest();
    };
    var nextTest = function() {
        ++obj_n;
        $('.speed').eq(obj_n).html('測速中...');
        setTimeout(function() {
            testSpeed();
        }, 500);
    };

    var testSpeed = function() {
        var obj = $('.speed').eq(obj_n);
        if (obj.length != 1) {
            return false;
        }
        obj.html('測速中...');
        // 建立 img 元素
        var pic = document.createElement('img');
        pic.onload = picLoad;
        pic.onerror = picError;
        start_time = new Date().getTime(); // 開始時間
        pic.src = obj.data('url').split('/').slice(0, 3).join('/') + '/speed.gif' + "?" + (Math.random() + '').replace('0.', '') + "s" + obj_n;
    };
    $(document).on('click', '#btnTest', function() {
        obj_n = 0;
        testSpeed();
    });
});
</script>

HTML：

<div><button id="btnTest">測速</button></div>

第1個測速網站：http://aa.example.com
<div class="speed" data-url="http://aa.example.com"></div>

第2個測速網站：http://bb.example.com
<div class="speed" data-url="http://bb.example.com"></div>