网络状态监控
刀刀
0字
0分钟
2026/8/16
前端 window 内置 API 可监控用户网络状态、延迟和带宽。以下是该属性的介绍。
JS 前置知识：Navigator.connection
- Navigator：
connection属性Navigator.connection只读属性返回一个包含有关系统网络连接信息的 NetworkInformation 对象，例如用户设备的当前带宽或连接是否按流量计费。这可以用于基于用户的连接状态来选择高清晰度内容或低清晰度内容。
值：一个 NetworkInformation 对象。包含的属性如下：
effectiveType：网络类型rtt：延迟，单位是毫秒downlink：带宽速度
具体效果如下图所示：
Window：
online事件当浏览器能够访问网络，且 Navigator.onLine (en-US) 的值被设为
true时，Window 接口的online事件将被触发。备注
该事件不能用于确定某个网站可否访问。网站自身问题或防火墙都有可能阻止对特定网站的访问。
是否冒泡 否 是否可取消 否 接口 Event Event handler property ononline jswindow.addEventListener('online', (event) => { console.log('You are now connected to the network.') })jswindow.ononline = (event) => { console.log('You are now connected to the network.') }
JS 网络状态监控效果实现
利用上述 API 实现效果：
js
function getNetworkInfo() {
let info
if (navigator.onLine) {
info = {
type: navigator.connection.effectiveType,
rtt: navigator.connection.rtt,
downlink: navigator.connection.downlink,
}
} else {
type: 'offline'
}
return info
}如何检测到信息变化呢？
- 如果是想要检测当前是否在线，可以通过
online和offline事件实现。 - 如果想检测网络状态的变化，上面的方法不再适用，可以通过
navigator.connection的change方法实现。
代码如下：
js
window.addEventListener('online', () => {
// ...
})
window.addEventListener('offline', () => {
// ...
})
navigator.connection.addEventListener('change', () => {
// ...
})JS 网络状态监控总体效果
跳转预览：点击跳转
贡献者
duyidao
平安喜乐
v_duyilin 刀刀