关于javascript:前端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,
如果测试出了缺点或者有更好的办法,欢送评论。
——每天给大家分享点有用的常识。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理