加载网站的过程可能会因网络状况而截然不同。通常，当您使用的是快速网络时，一切都很顺利，但当您外出时流量套餐有限且连接不稳定，或笔记本电脑的 Wi-Fi 速度较慢时，就另当别论了。
解决此问题的一种方法是根据用户的连接质量调整要向用户提供的资源。现在，Web 应用可通过 Network Information API 实现该目标，该 API 可让 Web 应用访问有关用户网络的信息。
用法
您可以通过多种方式利用这些网络信息来改善用户体验：
- 根据用户的网络，在提供高清和低清内容之间切换。
- 决定是否预加载资源。
- 当用户的网速较慢时，延迟上传和下载。
- 如果网络质量不足以加载应用和使用相关功能，请启用离线模式。
- 警告用户，通过移动网络执行某些操作（例如，观看视频）可能会产生费用。
- 您可以在分析中使用它来收集有关您用户的网络质量的数据。
许多应用已经在做类似的工作。例如，YouTube、Netflix 和大多数其他视频（或视频通话）服务会在流式传输期间自动调整分辨率。在加载 Gmail 时，它会为用户提供“加载基本 HTML（适用于慢速连接）”的链接。
运作方式
navigator.connection 对象包含有关客户端连接的信息。下表介绍了其属性。
| 媒体资源 | 说明 |
|---|---|
downlink |
带宽估算值（以 MB/秒为单位）。 |
effectiveType |
有效的连接类型，可能的值有 'slow-2g'、'2g'、'3g' 或 '4g'（涵盖 4g 及更高版本）。取决于往返时间和下行链路速度的组合。例如，由于存在延迟时间，结合快速下行链路和高延迟时间，有效类型较低。 |
onchange |
在连接信息更改时触发的事件处理程序。 |
rtt |
估算的连接的往返延迟时间（以毫秒为单位）。 |
saveData |
一个布尔值，用于定义用户是否已请求降低流量消耗模式。 |
以下是在浏览器的控制台中运行该程序时如下所示的内容：
effectiveType 值还可通过客户端提示获得，允许您将浏览器的连接类型传递给服务器。
借助 onchange 事件监听器，您可以动态适应网络质量的变化。如果您因为网络状况不佳而延迟上传或下载，则可以依靠事件监听器在检测到更好的网络状况时重启传输。您还可以使用它在网络质量发生变化时通知用户。例如，如果用户丢失 Wi-Fi 信号并被切换到移动网络，就可以防止意外传输数据（并产生费用 💸?）。
像使用任何其他事件监听器一样使用 onchange 事件监听器：
navigator.connection.addEventListener('change', doSomethingOnChange);
总结
Network Information API 具有巨大的潜在优势，尤其是对于使用较慢网络和需要大量带宽的应用的用户而言。最棒的是，它可以用作渐进增强技术。