JS检测网络带宽

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言：由于上班时过于头脑风暴使人觉得传文件时呆子一样的观察网速都是一件有意思的事！！

正文：前端判断网速的原理总结（借鉴了其他大佬）

1.通过请求和服务端同域的文件，例如图片，在前端开始请求和收到响应两个时间点分别通过Date.now()标记start和end，因为Date.now()得出的时1970年1月1日到当前时间经过的毫秒数，所以我们通过end-start来得出时间差（单位：毫秒），通过公式计算：

文件大小（单位kb）*1000 / (end-start) =>得出网速（KB/S）

而请求文件又分两种方式：通过img加载或者ajax加载：

（1）创建img对象，指定src，一旦指定src资源就开始加载，在加载完成时onload回调。这个过程产生了start时刻和end时刻。

（2）通过AJAX请求，创建xhr对象开始加载，当readyState=4时加载完成。此过程也产生了start和end。

2.通过H5的先进api实现：window.navigator.connection.downlink去查询网速。

优缺点：

img方法测速：没有跨域，但文件必须是图片形式，要自己提前知道文件大小。

ajax方法测速：跨域，文件大小可以通过response首部获得，文件不一定是图片。

downlink：不需要任何参数，但查询不是实时的。

代码实现：

方法一：

1```
 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
 })

方法二：

 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)

方法三：

function measureBW () {
     return navigator.connection.downlink;
 }
 measureBW() ;

想拥有小熊一体锅的第二天。