HTML5的Network Information API可检测网络状态，通过navigator.onLine获取设备联网状态，结合online/offline事件监听网络变化，并利用navigator.connection获取连接类型、带宽和延迟等信息，实现根据网络状况调整资源加载、优化用户体验的功能，需注意浏览器兼容性并做好降级处理。
HTML5 的 Network Information API 可以用来检测设备当前的网络连接状态，包括连接类型（如 Wi-Fi、4G、3G 等）以及是否在线。这个 API 对优化用户体验非常有用，比如在网络较差时降低图片质量或暂停数据同步。
1. 检测网络是否在线
最基础的功能是通过 navigator.onLine 属性判断设备是否处于联网状态。
该属性返回布尔值：
true：设备已连接网络 false：设备离线
示例代码：
立即学习“前端免费学习笔记（深入）”；
if (navigator.onLine) { console.log("设备已联网");} else { console.log("设备未联网");}
还可以监听网络状态变化事件：
window.addEventListener('online', () => { console.log("网络已连接");});window.addEventListener('offline', () => { console.log("网络已断开");});
2. 获取网络连接类型（NetworkInformation.connection）
更进一步，可以通过 navigator.connection 获取详细的网络信息，比如连接类型和有效带宽估算（downlink）。
常用属性包括：
type：连接类型，如 ‘wifi’, ‘cellular’, ‘ethernet’, ‘none’ effectiveType：有效连接类型，如 ‘slow-2g’, ‘2g’, ‘3g’, ‘4g’ downlink：下行速度（单位 Mbps） rtt：往返延迟（单位毫秒）
示例代码：
立即学习“前端免费学习笔记（深入）”；
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;if (connection) { console.log("连接类型:", connection.type); console.log("有效类型:", connection.effectiveType); console.log("下行速度:", connection.downlink + " Mbps"); console.log("RTT:", connection.rtt + " ms"); // 监听连接类型变化 connection.addEventListener('change', () => { console.log("网络类型已改变"); console.log("新的类型:", connection.effectiveType); });}
3. 实际应用场景建议
利用这些信息可以实现更智能的应用行为：
在 2G 或 slow-2g 网络下自动关闭高清图片加载 当用户离线时，提示“您当前无网络连接”，并启用缓存内容 在网速恢复后自动同步未发送的数据 根据 RTT 和 downlink 动态调整视频清晰度
4. 兼容性与注意事项
目前主流浏览器支持情况如下：
Chrome、Edge、Firefox（部分支持）、Samsung Internet 支持较好 Safari 不支持 navigator.connection（截至 iOS 17） 需注意该 API 在部分浏览器中可能位于前缀下（如 webkitConnection） 某些权限或上下文（如非安全域 http）可能限制访问
建议使用前做兼容性检查：
if ('connection' in navigator) { // 使用 Network Information API} else { // 回退到其他方式，例如基于请求响应时间判断网速}
基本上就这些。通过结合 online/offline 事件和 connection 信息，可以显著提升 Web 应用在网络环境变化时的适应能力。虽然 API 简单，但合理使用能带来不错的用户体验优化。
以上就是HTML5网络状态API怎么用_HTML5NetworkInformationAPI检测网络状态的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598247.html
微信扫一扫 
支付宝扫一扫 
