网络信息 API，迈向更好的网络的又一步😍

今年充斥着大量关于网络如何充斥着静态资源，以及这如何影响用户在使用全球各地不太好的网络时面临糟糕的用户体验的文章。像web.dev这样的资源正在积极发布关于如何打造更美好网络未来的内容。

背景

我还发表了一些关于如何提高网络性能的文章😁，你应该看看👇🏼：

• HTML 和 CSS
• 预加载/预取以增加加载时间
• JavaScript 性能改进
• 图像优化
• Web字体优化

以及其他技巧和窍门，例如如何使用OffscreenCanvas在主线程之外渲染图形。

本文围绕同一主题，但我们将了解如何检查和响应访问用户的连接方面，以便为他们提供更好的体验。

目前已经有一些此类应用，例如 BBC 新闻就向用户发出警告，称如果用户使用蜂窝网络，运营商将会向他们收取费用：

或者 GMail 显示“加载基本 HTML（适用于慢速连接）”消息：

网络信息API

到目前为止，我们尝试通过遵循上述技术之一来提升用户体验，无论用户使用哪种网络。但如果我们能有一种方法来检查和检测用户浏览我们应用程序时的网络连接属性和速度变化，那会怎样呢？

这时，网络信息 API就派上用场了。此 API 提供有关连接的信息，例如类型（例如 WiFi 或蜂窝网络，您可以查看完整列表 👇🏼）：

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意味着您可以发送更大的资源，例如高分辨率图像、标清视频和音频。最后，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;
}

概括

我们见证了网络信息 API在大多数需要解决性能问题甚至提供更佳用户体验的用例中的巨大作用。其他一些适用的用例包括：

• 无法加载高分辨率图像
• 阻止加载网络字体
• HTTP 调用已更改为使用摘要而不是完整页面加载来获取更少的数据
• HTTP 调用的超时值已增加
• 向用户显示警告和其他信息，让他们知道他们可能会被收费

💡 此 API 处于草稿状态，未来可能会有所更改。不过，与其等待完整规范出台，不如主动更新实现。

您可以在规范中找到更多相关信息。

浏览器支持

网络信息 API 确实很好，但是浏览器支持情况如何呢？目前只有 Chrome 和 MS Edge 支持。

您可以在此处查看完整列表。

现在去使用这个 API 并为您的用户节省一些钱😁。