#showdev网络信息API，迈向更好的网络的另一步
今年充斥着许多文章，讨论网络如何因静态资产而and肿，以及这如何影响用户在世界范围内使用不太理想的网络时面对糟糕的用户体验。诸如web.dev之类的资源正在积极发布有关如何为网络创造更美好未来的内容。
背景
我还发布了一些有关如何提高网络性能的?，您应该完全检查一下??：
- HTML和CSS
- 预加载/预取以增加加载时间
- JavaScript性能改进
- 图像优化
- Web字体优化
还有其他技巧和窍门，例如如何使用 OffscreenCanvas 使图形脱离主线程。
本文围绕同一主题，但我们将看到如何检查访问用户的连接方面并对其做出反应，从而为他们提供更好的体验。
有一些类似的实现方式，例如BBC新闻向用户显示警告，警告他们如果运营商在蜂窝网络上，他们将被收费：
或GMail显示“加载基本HTML（用于慢速连接）”消息：
网络信息API
到目前为止，我们已经尝试通过针对每个人遵循上述技术之一来改善用户体验，无论他们使用什么网络。但是，如果我们有意在他们浏览我们的应用程序时检查并检测他们的网络连接属性和速度变化，该怎么办？
那就是网络信息API发挥作用的时候。该API提供了有关连接的信息，例如类型（即WiFi或Cellular，您可以看到完整列表??）：
enum ConnectionType {
"bluetooth",
"cellular",
"ethernet",
"mixed",
"none",
"other",
"unknown",
"wifi",
"wimax"
};
以下是访问此信息的方法：
let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
这是您将得到的对象的样子：
NetworkInformation对象
因此，让我们一一看一下这些属性是什么：
effectiveType
此属性显示有效的连接类型。这与我们前面提到的连接类型有些不同。它根据最近观察到的组合而变化 ttl 和 downlink。
的可能值 effectiveType 是具有以下值的枚举：
enum EffectiveConnectionType {
"2g",
"3g",
"4g",
"slow-2g"
};
实际上，如果此属性具有 slow-2g 这意味着您应该避免发送图像，视频等。它仅适合发送纯文本内容。如果值为 2g 它表示您可能会向用户发送小的低分辨率图像。
3g 意味着您可以发送更大的资源，例如高分辨率图像，SD视频和音频。最后 4g 意味着该网络适合高清视频，流媒体和其他数据密集型资源。
downlink
这显示了连接的下载速度。单位使用的是每秒兆位。
onchange
此属性使您可以为 change 事件发生 NetworkInformation 宾语。
rtt
此属性表示往返时间估计，以毫秒为单位，最接近25毫秒，并且基于应用程序层RTT测量。
saveData
获得退货时的此属性 true 如果用户已请求用户代理减少数据使用模式。否则返回 false。
如果您想知道发生了什么事 type 属性，浏览器当前不支持该属性，没人知道这是否是因为规范处于草稿模式并且可能会更改。您可以在本文结尾的浏览器支持页面上找到更多信息。
用例
防止预载视频
现在我们知道该API有什么用，让我们看看我们可以做什么。想象一下，我们正在页面中预加载视频。我们可以联系 change 事件，如果用户使用较慢的网络，则停止预加载：
let preloadVideo = true;
const slowConnections = ('2g', '2g-slow');
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let type = connection.effectiveType;
function updateVideoPreloadingStrategy() {
console.log("Connection type changed from " + type + " to " + connection.effectiveType);
type = connection.effectiveType;
if (slowConnections.containes(type)) {
preloadVideo = false;
}
}
connection.addEventListener('change', updateVideoPreloadingStrategy);
加载低分辨率图像
您可以为您的元素设置一个类，然后基于该类加载其他图像：
function updateImageLoadingStrategy() {
console.log("Connection type changed from " + type + " to " + connection.effectiveType);
type = connection.effectiveType;
const myEl = document.querySelector('#id');
if (slowConnections.containes(type)) {
myEl.classList.add("low-res");
} else {
myEl.classList.remove("low-res");
}
}
和：
#id {
background: url(high-res.jpg) 0 0 no-repeat;
}
#id.low-res {
background: url(low-res.jpg) 0 0 no-repeat;
}
摘要
我们看到了Network Information API在我们要解决性能问题甚至提供更好的用户体验的大多数用例中有多么有用。其他一些适用的用例是：
- 无法加载高分辨率图像
- 防止加载网络字体
- HTTP调用已更改为使用摘要而不是整页加载来获取较少的数据
- HTTP调用的超时值增加
- 向用户显示警告和其他信息，以使他们知道自己可能要收费
API此API处于草稿状态，将来可能会更改。但是主动采取行动并稍后更新实施而不是等待完整的规范并没有什么害处。
您可以在规范中找到更多关于此的信息。
浏览器支持
因此，Network Information API很好，而且一切正常，但是浏览器支持如何。目前，仅Chrome和MS Edge支持该功能。
您可以在此处查看完整列表。
现在去玩这个API，为您的用户省钱?。