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) {
//连接到网络
}
}
}
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!