Javascript网络状态获取与监听 -逐梦个人博客

在以前，我们经常可能需要用到获取或者监听当前的网络状态，并根据当前的网络状态做一些对应的操作，比如网络慢的时候我们加载图片质量有所降低的图片，网络状态良好的时候加载更清晰的图片，再比如当网络切换，比如从网络状态改变的时候给用户一些提示，但碍于浏览器原生并没有提供相关的API，所以我们只能另辟蹊径，比如弄一个通用测速接口，通过计算请求从发起到结束的时间来判断当前的网速，这种方式虽然看起来能实现检测当前的网络状态，但效率不高，不能实时反馈，有延迟，而且结果也并不是那么准确，好消息是Network Information API来了，通过Network Information API我们就可以轻易的获取和监听当前的网络状态，下面介绍一下使用方式。

获取和监听网络状态主要用的是navigator中的connection属性，首先我们将navigator.connection打印出来：

从上图中，我们可以看到下navigator.connection有downlink，effectiveType，onchange，rtt，saveData几个属性，那么他们分别代表什么呢？

1、downlink 估算的下行速度/带宽

2、effectiveType 当前的网络连接类型

其中effectiveType的取值可能是'slow-2g'、'2g'、'3g'或者'4g'。在网速慢的时候，此功能可以让你通过提供较低质量的资源来提高页面的加载速度，通过它获得的网络类型是最接近的蜂窝网络连接类型（比如 2G），即使你实际连接的是WiFi，但你的有效网络类型可能是2G或者3G。

3、onchange 看命名我们就知道这是一个回调函数，在网络状态发生改变后执行

4、rtt 估算的往返时间

5、saveData 打开/请求数据保护模式

使用方式

首先我们可以直接获取当前的网络状态：

console.log(navigator.connection.effectiveType); // slow-2g/2g/3g/4g

监听网络状态的改变：

onConnectionChange() {
 	const { rtt, downlink, effectiveType, saveData } = navigator.connection;
	console.log(`有效网络连接类型: ${effectiveType}`);
	console.log(`估算的下行速度/带宽: ${downlink}Mb/s`);
	console.log(`估算的往返时间: ${rtt}ms`);
	console.log(`打开/请求数据保护模式: ${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange);

我们可以通过浏览器开发者工具中network的模拟网络功能来快速测试网络类型的改变。