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

Milica Mihajlija

加载网站的过程可能因网络而异 条件。当网络速度较快时，一切通常都很流畅，但是 流量套餐有限、连接不稳定、出门在外时 使用笔记本电脑连接了咖啡店慢速 Wi-Fi，就另当别论了。

解决此问题的一种方法是调整您要向用户投放的素材资源 决定。现在，使用 网络信息 API 使 Web 应用能够访问有关用户网络的信息。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 61
• <ph type="x-smartling-placeholder"></ph> 79 个
• <ph type="x-smartling-placeholder"></ph> 倍
• <ph type="x-smartling-placeholder"></ph> 倍

来源

用法

您可以通过多种方式利用这些网络信息 体验：

• 根据 用户的网络。
• 决定是否预加载资源。
• 在用户网速较慢时推迟上传和下载。
• 如果网络质量不足以加载应用，请启用离线模式 以及如何使用这些功能
• 警告用户，通过移动网络执行某些操作（例如观看视频）可能会产生费用 给他们钱。
• 您可以在分析中使用这些数据，以收集有关用户网络质量。

许多应用已经在采取类似的措施。例如，YouTube Netflix 和大多数其他视频（或视频通话）服务会自动调整 流式传输期间的分辨率。Gmail 加载时，会为用户提供 “加载基本 HTML（适用于慢速连接）”链接。

工作原理

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

属性	说明
downlink	带宽估算值，以兆比特/秒为单位。
effectiveType	连接的有效类型，可能的值包括 'slow-2g'、'2g'、'3g' 或 '4g'（涵盖 4g 及更高级别）。根据往返时间和下行链路速度综合确定。例如，由于存在延迟，快速下行与高延迟相结合后，effectiveType 较低。
onchange	连接信息更改时触发的事件处理程序。
rtt	估算的连接的往返延迟时间（以毫秒为单位）。
saveData	一个布尔值，用于定义用户是否已请求“节省数据流量”模式。

当您在浏览器的控制台中运行此命令时，将如下所示：

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

注意 ：您可以在 Service Worker 内访问 Network Information API，以适应用户离线时的情况。

借助 onchange 事件监听器，您可以动态适应 网络质量。如果您由于网络状况不佳而延迟了上传或下载 您可以依靠事件监听器在传输发生时重启传输 检测更好的网络状况。您还可以使用它 网络质量变化。例如，如果用户的 Wi-Fi 信号已断开 这样就能够防止意外的数据传输（以及 费用 💸?）。

像使用任何其他事件监听器一样使用 onchange 事件监听器：

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

注意 ：自 62 版起，基于 Chromium 的浏览器支持 Network Information API。

总结

Network Information API 具有巨大的潜在优势，尤其是对于 速度慢的网络，以及需要高带宽的 应用程序的用户最佳 总之，它可以用作一种渐进式增强技术。