html5中检测网络状态的方法,前端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.οnchange=() => {

if (netWorkDownlink !== navigator.connection.downlink || navigator.connection.rtt === 0) {

//网络断开

} else if (netWorkDownlink === navigator.connection.downlink || navigator.connection.rtt !== 0) {

//连接到网络

}

}

}

虽然不太准确，但是目前测试没发现bug，

如果测试出了缺陷或者有更好的方法，欢迎评论。

——每天给大家分享点有用的知识。

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[前端js监听浏览器网络变化]http://www.zyiz.net/tech/detail-147027.html