加载网站的过程可能因网络而异 条件。当网络速度较快时,一切通常都很流畅,但是 流量套餐有限、连接不稳定、出门在外时 使用笔记本电脑连接了咖啡店的慢速 Wi-Fi,就另当别论了。
解决此问题的一种方法是调整您要向用户投放的素材资源 决定。现在,使用 网络信息 API 使 Web 应用能够访问有关用户网络的信息。
用法
您可以通过多种方式利用这些网络信息 体验:
- 根据 用户的网络。
- 决定是否预加载资源。
- 在用户网速较慢时推迟上传和下载。
- 如果网络质量不足以加载应用,请启用离线模式 以及如何使用这些功能
- 警告用户,通过移动网络执行某些操作(例如观看视频)可能会产生费用 给他们钱。
- 您可以在分析中使用它,以收集有关用户网络质量。
许多应用已经在采取类似的措施。例如,YouTube Netflix 和大多数其他视频(或视频通话)服务会自动调整 流式传输期间的分辨率。Gmail 加载时,会为用户提供 “加载基本 HTML(适用于慢速连接)”链接。
![此链接用于在用户连接速度较慢时加载基本 HTML 版 Gmail](https://web.developers.google.cn/static/articles/adaptive-serving-based-on-network-quality/image/a-link-load-basic-html-v-cc25c3a82b2cb.png?authuser=5&hl=sl)
工作原理
navigator.connection
对象包含客户端
连接。下表介绍了其属性。
属性 | 说明 |
---|---|
downlink |
带宽估算值,以兆比特/秒为单位。 |
effectiveType |
连接的有效类型,可能的值包括 'slow-2g' 、'2g' 、'3g' 或 '4g' (涵盖 4g 及更高级别)。根据往返时间和下行链路速度综合确定。例如,由于存在延迟,快速下行与高延迟相结合后,effectiveType 较低。 |
onchange |
连接信息更改时触发的事件处理程序。 |
rtt |
估算的连接的往返延迟时间(以毫秒为单位)。 |
saveData |
一个布尔值,用于定义用户是否已请求“节省数据流量”模式。 |
当您在浏览器的控制台中运行此命令时,将如下所示:
effectiveType
值还可通过
客户端提示
并允许您将浏览器的连接类型传达给服务器。
借助 onchange
事件监听器,您可以动态适应
网络质量。如果您由于网络状况不佳而延迟了上传或下载
您可以依靠事件监听器在传输发生时重启传输
检测更好的网络状况。您还可以使用它
网络质量变化。例如,如果用户的 Wi-Fi 信号已断开
这样就能够防止意外的数据传输(以及
费用 💸?)。
像使用任何其他事件监听器一样使用 onchange
事件监听器:
navigator.connection.addEventListener('change', doSomethingOnChange);
总结
Network Information API 具有巨大的潜在优势,尤其是对于 慢速网络,以及需要高带宽的低速应用用户。最佳 总之,它可以用作一种渐进式增强技术。