JavaScript检测网络状态需结合navigator.onLine监听与fetch探测：前者监听online/offline事件获基础状态，后者通过同源HEAD请求验证真实连通性，并处理超时、页面可见性及误判场景。
JavaScript 中检测网络状态，核心是监听 navigator.onLine 属性变化，并结合实际请求验证，因为该属性仅反映浏览器“是否认为自己在线”，容易误判（比如连着 Wi-Fi 但无外网）。
navigator.onLine 是一个只读布尔值，页面加载时即有初始值，后续会随系统网络切换自动更新。但它不保证能访问服务器——例如本地断网但路由器仍通电，它可能返回 true。
if (navigator.onLine) { /* 可能在线 */ }
window.addEventListener('online', () => console.log('上线了'))
window.addEventListener('offline', () => console.log('掉线了'))
仅靠 navigator.onLine 不可靠，建议搭配一次快速 HTTP 请求（如对自身域名的 /health 或空响应接口）确认服务可达性。
fetch('/health', { method: 'HEAD' })
AbortController 控制 3–5 秒内无响应即判定为离线用户切到其他标签页或休眠设备时，onlin 事件可能延迟触发。可在页面重获焦点或可见时主动校验：
e/offline
visibilitychange 事件，在 document.visibilityState === 'visible' 时执行一次探测focus 事件，适用于用户切回窗口场景navigator.onLine 更准确真实项目中要注意这些典型问题：
navigator.onLine 始终为 true