JavaScript检测网络状态需结合navigator.onLine监听与fetch探测：前者监听online/offline事件获基础状态，后者通过同源HEAD请求验证真实连通性，并处理超时、页面可见性及误判场景。

JavaScript 中检测网络状态，核心是监听 navigator.onLine 属性变化，并结合实际请求验证，因为该属性仅反映浏览器“是否认为自己在线”，容易误判（比如连着 Wi-Fi 但无外网）。

使用 navigator.onLine 判断基础连接状态

navigator.onLine 是一个只读布尔值，页面加载时即有初始值，后续会随系统网络切换自动更新。但它不保证能访问服务器——例如本地断网但路由器仍通电，它可能返回 true。

• 直接读取：if (navigator.onLine) { /* 可能在线 */ }
• 监听变化：window.addEventListener('online', () => console.log('上线了'))
• 监听掉线：window.addEventListener('offline', () => console.log('掉线了'))

用 fetch 发起轻量探测验证真实连通性

仅靠 navigator.onLine 不可靠，建议搭配一次快速 HTTP 请求（如对自身域名的 /health 或空响应接口）确认服务可达性。

• 推荐用 HEAD 请求减少开销：fetch('/health', { method: 'HEAD' })
• 设置超时（需封装）：原生 fetch 无 timeout，可用 AbortController 控制 3–5 秒内无响应即判定为离线
• 避免跨域问题：探测地址应与当前站点同源，或后端已配置 CORS

结合页面生命周期做主动检查

用户切到其他标签页或休眠设备时，online/offline 事件可能延迟触发。可在页面重获焦点或可见时主动校验：

• 监听 visibilitychange 事件，在 document.visibilityState === 'visible' 时执行一次探测
• 监听 focus 事件，适用于用户切回窗口场景
• 首次加载后立即探测一次，比依赖初始 navigator.onLine 更准确

处理常见误判场景

真实项目中要注意这些典型问题：

• Chrome 在某些代理或企业网络下，navigator.onLine 始终为 true
• 移动端切飞行模式后，事件触发有几百毫秒延迟，不能完全依赖实时性
• HTTP 探测失败不等于永久离线，应区分“暂时不可达”和“确定离线”，比如连续 2 次失败再标记状态
• 静默失败时提供 UI 反馈（如顶部提示栏），并允许用户手动重试