JS 檢測網絡帶寬

最近項目上有需求要檢測網絡的帶寬，網上找了很多解決方案，如下王二來作一個整理

一、方法一

第一種思路是 加載一張圖片，經過的加載時長和圖片的大小來計算出網絡帶寬

有了這個思路，咱們能夠參考以下代碼（部分參考自 github 上的debloper/bandwidth.js）：

function measureBW(fn) {
    var startTime, endTime, fileSize;

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
        if(xhr.readyState === 2){
            startTime = Date.now();
        }
        if (xhr.readyState === 4 && xhr.status === 200) {
            endTime = Date.now();
            fileSize = xhr.responseText.length;
            var speed = fileSize  / ((endTime - startTime)/1000) / 1024;
            fn && fn(Math.floor(speed))
        }
    }

    xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png", true);
    xhr.send();
}

measureBW((speed)=>{
    console.log(speed + " KB/sec");  //215 KB/sec
})
複製代碼

二、方法二

可是考慮到http請求須要創建鏈接，以及等待響應，這些過程也會消耗一些時間，因此以上的方法可能不會準確的檢測出網絡帶寬。

咱們能夠同時發出屢次請求，來減小http請求創建鏈接，等待響應的影響，參考以下代碼：

function measureBW(fn,time) {
    time = time || 1;
    var startTime, endTime, fileSize;
    var count = time ;
    var _this = this;
    function measureBWSimple () {
        
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if(!fileSize){
                    fileSize = xhr.responseText.length;
                }
                count --;
                if(count<=0){
                    endTime = Date.now();
                    var speed = fileSize * time  / ((endTime - startTime)/1000) / 1024;
                    fn && fn(Math.floor(speed));
                }
            }
        }
        xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png", true);
        xhr.send();
    }
    startTime = Date.now();
    for(var x = time;x>0;x--){
        measureBWSimple()
    }
}

measureBW((speed)=>{
    console.log(speed + " KB/sec");  //913 KB/sec
},10)
複製代碼

經王二測試，第二種方法獲得的結果要比方法一獲得的結果明顯高出很多。

事實上，前兩種還要額外設置 http 請求頭來禁止使用本地緩存（開發測試下能夠在控制檯Network面板下點擊禁用緩存），要否則圖片加載一次後就不會在去服務器加載，天然也測不出網絡的帶寬.

三、方法三

在 Chrome65+ 的版本中，添加了一些原生的方法能夠檢測有關設備正在使用的鏈接與網絡進行通訊的信息。

參考以下代碼，咱們就能夠檢測到網絡帶寬：

function measureBW () {
    return navigator.connection.downlink;
}
measureBW() ;
複製代碼

navigator.connection.downlink 會返回以（兆比特/秒）爲單位的有效帶寬估計值(參考MDN),這和咱們經常使用的（KB/sec）有所差異，因此咱們須要再作一下單位換算，參考以下代碼：

function measureBW () {
    return navigator.connection.downlink * 1024 /8;   //單位爲KB/sec
}
measureBW() ;
複製代碼

咱們還能夠經過 navigator.connection 上的 change 事件來監聽網絡帶寬的變化：

navigator.connection.addEventListener('change', measureBW());
複製代碼

參考文章：

MDN NetworkInformation

Network Information API Sample

Kbps、KB、Mbps單位換算

原文地址：

王玉略的我的網站