Javascript网络状态获取与监听

原创 Dean 程序相关 二维码阅读
2018-10-18 22:19

在以前,我们经常可能需要用到获取或者监听当前的网络状态,并根据当前的网络状态做一些对应的操作,比如网络慢的时候我们加载图片质量有所降低的图片,网络状态良好的时候加载更清晰的图片,再比如当网络切换,比如从网络状态改变的时候给用户一些提示,但碍于浏览器原生并没有提供相关的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的模拟网络功能来快速测试网络类型的改变。

怎么样,是不是很惊喜?不过有点遗憾的是到目前为止,不是所有浏览器都支持这一新特性,下面我们看一下这个新特性的浏览器支持情况

可以看出IE是不支持的,Edge支持情况不明,到目前为止Safari也还暂时不支持这一特性,所以依然路遥遥,还有很多路需要走,但是并不是我们就不能使用这一特性了,在前端开发中有一个名词叫“优雅降级”,我们可以在支持这一特性的浏览器使用,不支持的情况下还是使用我们之前那种比较笨的办法。

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

本文地址:https://www.deanhan.cn/network-effective-type.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信