在以前，我们经常可能需要用到获取或者监听当前的网络状态，并根据当前的网络状态做一些对应的操作，比如网络慢的时候我们加载图片质量有所降低的图片，网络状态良好的时候加载更清晰的图片，再比如当网络切换，比如从网络状态改变的时候给用户一些提示，但碍于浏览器原生并没有提供相关的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 打开/请求数据保护模式
使用方式
首先我们可以直接获取当前的网络状态：
|
1
|
console.log(navigator.connection.effectiveType); // slow-2g/2g/3g/4g |
监听网络状态的改变：
|
1
2
3
4
5
6
7
8
9
|
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的模拟网络功能来快速测试网络类型的改变。
怎么样，是不是很惊喜？不过有点遗憾的是到目前为止，不是所有浏览器都支持这一新特性，下面我们看一下这个新特性的浏览器支持情况
可以看出IE是不支持的，Edge支持情况不明，到目前为止Safari也还暂时不支持这一特性，所以依然路遥遥，还有很多路需要走，但是并不是我们就不能使用这一特性了，在前端开发中有一个名词叫“优雅降级”，我们可以在支持这一特性的浏览器使用，不支持的情况下还是使用我们之前那种比较笨的办法。