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

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

前言

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

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

浏览器支持情况（https://caniuse.com/?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();

参考资料

https://coyotess.medium.com/how-to-get-information-about-user-network-connection-in-javascript-4d63fd58f15f

https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation

https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/downlinkMax

https://whatwebcando.today/network-type-speed.html

https://googlechrome.github.io/samples/network-information/