[Javascript]透過檔案下載的方式,測試Client端與Server端的傳輸速率

透過檔案下載的方式,測試Client端與Server端的傳輸速率

大家一定都有遇過

明明Server跟網路都好好的沒有問題,但是就是有客戶打電話給工程師說,網頁開的很慢,檔案下載也很慢

通常我們都會先從伺服器先查起,查看伺服器的CPU使用與記憶體的使用狀態
若是使用上沒有問題,就會開始查網路的狀態
如果公司內部沒有病毒流竄,連外網路也很正常,就很容易搞不清楚到底是哪裡的問題

這時,很多人就會想到hinet上有測試網路速度的功能
http://speed.hinet.net/

但是hinet是使用Dr.Speed作為速率測試的套件,一般來說公司可能不太願意再加成本添購這樣的軟體

所以,本文的重點來啦!!

其實相同的方式,用Javascript也可以辦得到
只要讓Client端下載一個比較大的檔案,再去計算開始下載與下載完成的時間差,好像就可以達到我們要的效果了

只要在測速網頁中加上下列的Javascript,並放上一張檔案大一點的圖片就可以辦到了

function funGetbandwidth()    
{
var intFileSize = 656; // 檔案大小的K數
var strFileName = "photo.jpg";  // 要下載的檔案名稱

var objImg = new Image;  
var dtStart = new Date(); 

objImg.onload = function()
{
    var dtEnd = new Date(); 
    var dtProcess = dtEnd - dtStart;
    if(dtProcess == 0){  
        alert('測試檔案沒有下載,或是測試檔案不存在')
    }

    var intSpeed = Math.round(intFileSize * 1024) / dtProcess;    
    
    if ((intSpeed / 1024) > 1)
        alert("速度結果:每秒" + (intSpeed / 1024).toFixed(1) + "m");
    else
        alert("速度結果:每秒" + intSpeed.toFixed(1) + "k");
};

objImg.src = strFileName;  
}

// 執行下載檔案並測速的動作
funGetbandwidth();

程式碼的內容,其中intFileSize是這張圖檔的大小,以K數來算
strFileName是要下載的檔案名稱
都設定好之後,就直接跑跑看吧

是不是很簡單呢?