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 事件可能延迟触发。可在页面重获焦点或可见时主动校验：
立即学习“Java免费学习笔记（深入）”；
- 监听
visibilitychange事件，在document.visibilityState === 'visible'时执行一次探测 - 监听
focus事件，适用于用户切回窗口场景 - 首次加载后立即探测一次，比依赖初始
navigator.onLine更准确
处理常见误判场景
真实项目中要注意这些典型问题：
- Chrome 在某些代理或企业网络下，
navigator.onLine始终为true - 移动端切飞行模式后，事件触发有几百毫秒延迟，不能完全依赖实时性
- HTTP 探测失败不等于永久离线，应区分“暂时不可达”和“确定离线”，比如连续 2 次失败再标记状态
- 静默失败时提供 UI 反馈（如顶部提示栏），并允许用户手动重试
