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

html5中检测网络状态的方法,前端js监听浏览器网络变化相关推荐

js监听浏览器返回、后退、上一页按钮事件方法
一.监听浏览器事件⼤家知道在页⾯中我们可以使⽤javascript window history,后退到前⾯页⾯,但是由于安全原因javascript不允许修改history ⾥已有的url链接,但 ...
js监听select值变化_网络编程——C++实现socket通信(TCP)高并发之select模式
相关函数: 服务端: socket() bind() listen() FD_ZERO()等辅助函数 select() 高并发select模式 accept() read() 或 recv()等 wr ...
谷歌浏览器怎么改html5,关于谷歌浏览器不支持html5中audio的autoplay解决方法（js代码解决）...
当我们直接写autoplay时,在chrome中浏览器并没有自动播放音频: 如果直接通过js来调用audio的play()方法也不行: 控制台还会报错大概意思:play()调用失败,因为用户没有与文 ...
android 获取wifi的加密类型,Android WIFI开发：获取wifi列表，连接指定wifi，获取wifi加密方式，监听wifi网络变化等...
下面是 Android 开发中 WiFi 的常用配置,如:获取当前 WiFi ,扫描 WiFi 获取列表,连接指定 WiFi ,监听网络变化等等. 下面是效果图: GitHub 下载地址:https: ...
前端路由的原生代码实现？前端如何监听路由变化？
前端如何监听路由的变化?如何根据前端路由的变化,去操作相应的DOM? 本文从前端层面上,大致解读一下,前端路由的监听与相关DOM操作的方法. 实现的基本原理: 首先,放置指定的DOM标识, 其次,当锚 ...
linux 查看san链路状态,Linux下查看网络状态的方法
当我的设备在机房,懒得去查看网线连接情况:或者设备在远端,没有条件让眼睛亲临现场,我需要在终端查看设备网络接口的物理连接状态.基于此种场景,我就了解了几种关于命令查看网络状态的方法. 1. ifcon ...
HTML5新增的video标签,HTML5中video标签的使用方法
HTML5中video标签的使用方法发布时间:2020-08-27 11:33:56 来源:亿速云阅读:100 作者:小新这篇文章将为大家详细讲解有关HTML5中video标签的使用方法,小编觉 ...
JAVAWeb开发（基于分片的网络状态查询方法、装置及存储介质）
本文基于分片的网络状态查询方法.装置及存储介质已是申请的专利.本人为第一发明人,这里给出来是提供一种写专利的范本,仅供参考. 专利申请号:CN202110346967.5 正文部分: 技术领域本申请 ...
html5前端开发框架模板,HTML5中50个免费的Bootstrap前端框架模板
原标题:HTML5中50个免费的Bootstrap前端框架模板毫无疑问,Bootstrap模板的受欢迎程度依然如雨后春笋般迅速增长,这股力量就在不久前还被低估了呢,Bootstrap前端框架基于最新 ...

html5中检测网络状态的方法,前端js监听浏览器网络变化

html5中检测网络状态的方法,前端js监听浏览器网络变化相关推荐

最新文章

热门文章