前端js监听浏览器网络变化

首先，为何要让前端判断用户的网络状态呢——为了更好的用户体验。

其次，前端可否判断网络状态？有哪些方法？

1，能够作到渐进式判断，不能作到绝对准确。
2，使用的是navigator.onLine或navigator.connection.rtt

根据我实际测试所得，

navigator.onLine 没法及时获取真实网络状态，好比手动把网线，使用定时器获取navigator.onLine，始终是true，过好久才变成false(差很少至关于一个ajax的timeout时间)

navigator.connection 能够实时监听到网络变化（延迟2-5秒），可是获取到的网络是一个模糊值
好比navigator.connection.rtt 是请求预估延迟xx ms,有时候是0毫秒的延迟，却偏偏是已经断网了。

因此我作了一下判断：

const netWorkDownlink = navigator.connection.downlink; // 预估下载速度m/s

if (navigator.connection && navigator.connection.onchange === null) {
    navigator.connection.onchange=() => {
      if (netWorkDownlink !== navigator.connection.downlink || navigator.connection.rtt === 0) {
         //网络断开
      } else if (netWorkDownlink === navigator.connection.downlink || navigator.connection.rtt !== 0) {
         //链接到网络
      }
   }
}

虽然不太准确，可是目前测试没发现bug，
若是测试出了缺陷或者有更好的方法，欢迎评论。
——天天给你们分享点有用的知识。