此页面由 Cloud Translation API 翻译。

基于网络质量的自适应投放

Milica Mihajlija

加载网站的体验可能会因网络状况而有很大不同。网络速度快时，一切通常都很流畅，但当您出门在外时流量套餐有限且网络连接不稳定，或者笔记本电脑的咖啡店 Wi-Fi 速度很慢，则情况会有所不同。

解决此问题的方法之一是根据用户的连接质量调整向用户提供的资源。现在，借助 Network Information API，Web 应用可以访问有关用户网络的信息。

浏览器支持

来源

用法

您可以通过多种方式使用这些网络信息来改善用户体验：

根据用户的网络在提供高清和低清晰内容之间切换。
决定是否预加载资源。
在用户网速较慢时推迟上传和下载。
如果网络质量不佳，无法加载应用和使用功能，请启用离线模式。
警告用户，通过移动网络执行某些操作（例如观看视频）可能需要付费。
在数据分析中使用该指标，以收集用户网络质量的数据。

许多应用已经在采取类似的措施。例如，YouTube、Netflix 和大多数其他视频（或视频通话）服务会在在线播放期间自动调整分辨率。在加载过程中，Gmail 会向用户提供用于“加载基本 HTML（适用于连接缓慢的情况）”的链接。

工作原理

navigator.connection 对象包含有关客户端连接的信息。下表介绍了其属性。

属性	说明
`downlink`	带宽估算值（以每秒兆比特为单位）。
`effectiveType`	连接的有效类型，可能的值为 `'slow-2g'`、`'2g'`、`'3g'` 或 `'4g'`（涵盖 4g 及更高版本）。基于往返时间和下行速度的组合确定。例如，如果下行链路速度快但延迟时间长，则有效类型会因延迟时间而降低。
`onchange`	连接信息更改时触发的事件处理程序。
`rtt`	估算的连接的往返延迟时间（以毫秒为单位）。
`saveData`	一个布尔值，用于定义用户是否已请求使用流量消耗量较低的模式。

在浏览器的控制台中运行该脚本时，其显示如下所示：

显示 navigator.connection 对象属性值的 Chrome DevTools 控制台

您还可以通过客户端提示获取 effectiveType 值，并将浏览器的连接类型传达给服务器。

借助 onchange 事件监听器，您可以动态适应网络质量的变化。如果您由于网络状况不佳而延迟了上传或下载，可以依赖事件监听器在检测到更好的网络状况时重启传输。您还可以使用它在网络质量发生变化时通知用户。例如，如果设备丢失 Wi-Fi 信号并切换到移动网络，这可以防止意外的数据传输（以及扣款 💸?）。

使用 onchange 事件监听器的方式与使用任何其他事件监听器的方式一样：

navigator.connection.addEventListener('change', doSomethingOnChange);

总结

Network Information API 的潜在优势很大，尤其是对于网络速度缓慢的用户和需要大量带宽的应用。最重要的是，它可以用作渐进式增强技术。