网络状态监控

1.获取网络信息

通过navigator.connection可获取当前浏览器的网络状态

console.log(navigator.connection)

可以获取到以下信息

属性	描述
downlink	返回以 Mb/s 为单位的有效带宽
effectiveType	当前网络类型，如2g,3g,4g
onchange	网络状态发生变化时，触发相应回调
rtt	返回了当前连接下评估的往返延迟，也就是ping
saveData	表示用户代理对减少数据使用的偏好

注意：effectiveType并不能真正获取网络类型，而是通过综合网速来判断

2.监控网络状态

通过监控window对象的online和offline事件，获取浏览器的网络状态

window.addEventListener('online',()=>{
    console.log('上线了')
})
window.addEventListener('offline',()=>{
    console.log('掉线了')
})

3.监控网络信息

通过navigator.connection对象上的onchange事件，监控网络信息的变化

const connect = navigator.connection;

connect.addEventListener("change", () => {
    console.log('网络信息发生变化');
});