监听网络连接？网络测速？会这些 Network API 就够了？

好汉勃士 2023-02-06 发布于广东

展开全文

大家好，很高兴又见面了，我是'前端进阶'，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

3G/4G/5G/WIFI有什么不同？

前言

不同的用户有不同的网络连接，可以是 3G、4G、5G、WiFi 等。有时当联网连接从 4G 变为 3G 甚至无网络的时候，作为开发人员，应该对这种变化做出反应，例如显示通知或建议不要下载复杂的媒体内容。

下图展示了不同浏览器对此类API的支持情况，总体看来，浏览器的支持情况分为4个类别。

浏览器支持情况（https:///?search=navigator.connection）

仅支持与最新规范不匹配的 navigator.connection.type 值。
只支持type值
只支持type和downlinkMax值
只支持downlink,、effectiveType 、rtt值

下面是笔者机器打印navigator.connection的值:

navigator.connection的输出

接下来对每一个值进行说明。

1.连接类型

可以找出使用了哪种连接类型，为此需要获取 NetworkInformation 对象中type属性的值：

const connectionType = navigator.connection.type;console.log(connectionType); // cellular

输出'cellular'，在 ConnectionType 枚举中列出了许多其他可能的值：

enum ConnectionType {  'cellular',  'wifi',  'wimax',  'bluetooth',  'ethernet',  'mixed',  'other',  'unknown',  'none'};

这里重点解释一下none和unknown值。none相当于 navigator.onLine = false，这意味着用户离线或没有互联网连接。 unknown是指用户有互联网连接，但无法或不愿确定其连接方式。

Network Information API 的 NetworkInformation 接口提供有关设备用于与网络通信的连接的信息，并提供一种在连接类型更改时通知脚本的方法。无法实例化 NetworkInformation 接口，它是通过 Navigator 接口的连接属性访问的。而且在Web Workers中可用！

2.有效连接类型 (ECT)

确定用户的互联网连接速度有时候可能很有用：

const ect: string = navigator.connection.effectiveType;console.log(ect); //输出 4g

有 4 个可能的值：

enum EffectiveConnectionType {  'slow-2g',  '2g',  '3g',  '4g'};

解释一下这些值：

slow-2g : 当用户只有0-50 Kbps 的互联网速度时，页面加载非常慢，不建议显示任何媒体内容，如图像、视频、音频等。
2g : 当用户有 50-70 Kbps 的互联网速度时，看起来像 slow-2g，但可以显示小图像。
3g : 正常的 70–700 Kbps 互联网速度，用户可以加载图像、LQ 视频或音频。
4g : 从 700 Kbps 到无穷大的良好互联网速度，适用于任何媒体内容。

下面是该属性的浏览器支持情况：

总体来看，FF浏览器不支持，Chrome从61版本已开始提供支持。

3.RTT值

只读属性，返回当前连接的估计有效往返时间，四舍五入到最接近的 25 毫秒倍数。该值基于最近活动的连接中观察到的应用层 RTT 测量值，它不包括与私有地址空间的连接。如果没有最近的测量数据可用，则该值基于底层连接技术的属性。

const rtt: number = navigator.connection.rtt; // 毫秒计算的rtt值console.log(rtt); // 100

注意：这个属性在Web Workers中依然可用！

4.Downlink下行链路

接口的下行链路只读属性。返回以兆比特/秒为单位的有效带宽估计，四舍五入到最接近的 25 千比特/秒的倍数。该值基于最近观察到的活动连接的应用程序层吞吐量，不包括与专用地址空间建立的连接。在没有最近的带宽测量数据的情况下，属性值由底层连接技术的属性决定。

const downlink: number = navigator.connection.downlink;console.log(downlink); // 2.8

还有一个属性downlinkMax，也是只读属性。返回底层连接技术的最大下行链路速度，以每秒兆位 (Mbps) 为单位。下面是downlink浏览器的支持情况：

downlink浏览器支持情况

5.了解有关更改 Internet 连接的信息

NetworkInformation API 有 onchange 事件处理程序，每次当用户代理中的网络连接发生变化时它都会运行，可以实现自己的处理程序来跟踪这种变化并做出反应。

// 获取连接类型const type = navigator.connection.type;function changeHandler(e) {   //处理连接类型变化}// 添加onchange事件navigator.connection.onchange = changeHandler;// 或者navigator.connection.addEventListener('change', changeHandler);

尝试在 Network DevTools 面板中更改您的互联网连接，您会在控制台中看到输出的更改。您也可以在笔记本电脑上禁用并再次启用 WiFi 连接，浏览器也会跟踪此更改。然后你可以根据需要修改脚本来处理这些变化！

6.完整测试代码

log = console.log;navigator.connection.addEventListener('change', logNetworkInfo);// 打印所有浏览器网络参数function logNetworkInfo() {  // 浏览器使用的网络类型  log('         type: ' + navigator.connection.type);  //有效带宽估算  log('     downlink: ' + navigator.connection.downlink + ' Mb/s');  // 有效往返时间估计  log('          rtt: ' + navigator.connection.rtt + ' ms');  // 第一个网络跃点的下行链路速度上限  log('  downlinkMax: ' + navigator.connection.downlinkMax + ' Mb/s');  // 使用最近观察到的 rtt 和下行链路值的组合确定的有效连接类型  log('effectiveType: ' + navigator.connection.effectiveType);  // 如果用户已从用户代理请求减少数据使用模式，则为真  log('     saveData: ' + navigator.connection.saveData);  // 添加空格以提高可读性  log('');}logNetworkInfo();