MENU

JavaScript网络状态获取与监听

• May 22, 2019 • Read: 2120 • 代码分享阅读设置

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

获取和监听网络状态主要用的是navigator中的connection属性,首先我们将navigator.connection打印出来:
console.png
从上图中,我们可以看到下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的模拟网络功能来快速测试网络类型的改变。
test.png
怎么样,是不是很惊喜?不过有点遗憾的是到目前为止,不是所有浏览器都支持这一新特性,下面我们看一下这个新特性的浏览器支持情况
support.png
可以看出IE是不支持的,Edge支持情况不明,到目前为止Safari也还暂时不支持这一特性,所以依然路遥遥,还有很多路需要走,但是并不是我们就不能使用这一特性了,在前端开发中有一个名词叫“优雅降级”,我们可以在支持这一特性的浏览器使用,不支持的情况下还是使用我们之前那种比较笨的办法。

好了,本文就介绍这么多了,闪人了。

Archives QR Code Tip
QR Code for this page
Tipping QR Code