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单位换算

原文地址：

王玉略的我的网站