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 简单，但合理使用能带来不错的用户体验优化。
