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

Milica Mihajlija
Milica Mihajlija

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

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

浏览器支持

  • Chrome:61。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:不支持。 <ph type="x-smartling-placeholder">
  • Safari:不支持。 <ph type="x-smartling-placeholder">

来源

用法

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

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

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

此链接用于在用户连接速度较慢时加载基本 HTML 版 Gmail

工作原理

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

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

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

显示 navigator.connection 对象的属性值的 Chrome 开发者工具控制台

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

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

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

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

总结

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