【干货】js简单实现动态网速强度

先定一个div用于显示‘弱、中、强’三个强度的图标，这里也可以直接显示文字：

在页面加载完成时也就是测速开始时定义一个轮询并保存一下当前时间，用一张不大不小的图片做测速，这里选了个百度的logo图，因为不用担心资源失效。
注意在图片后添加 rd=_" +new Date().getTime(),否则浏览器会缓存当前图片就不去加载了，影响到测速

//测速开始时就执行
   var timer =  setInterval(function () {
       st = new Date();
       var img = document.createElement("img");
       img.style.width = 0;
       img.style.height = 0;
       img.style.display = "none";
       img.src =
         "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1971525978,455276806&fm=26&gp=0.jpg?rd=_" +
         new Date().getTime();
       img.onload = showspeed;
     }, 10000);
window.onbeforeunload = function (){
  clearInterval(timer)
}


function showspeed() {
  var arr = ["弱", "中", "强"];
  var filesize = 35.4; //measured in KB
  var et = new Date();
  var speed = Math.round(filesize * 1000) / (et - st);
  
// console.log(speed);
    speed > 0 && speed <= 100
      ? changeSignalIco("week_signal.png", "弱")
      : speed > 100 && speed <= 300
      ? changeSignalIco("general_signal.png", "中")
      : speed > 300
      ? changeSignalIco("strong_signal.png", "强")
      : changeSignalIco("strong_signal.png", "强");
}  

function changeSignalIco(img,title){
$("#signal_ico")[0].src = "../images/" + img;
 $("#signal_ico")[0].title = title;
}

大概原理就是动态去轮询加载一张隐藏的图片，当图片加载完成时执行showspeed方法进行加载时间和文件大小的计算得出网速，然后根据不同的网速对强度图标进行切换。