在 javascript 中，`navigator.online` 属性用于读取浏览器的在线状态，但它返回的是布尔值而非函数调用结果。要拆分长任务并安全地读取该状态，应使用 `settimeout` 或 `requestidlecallback` 将读取操作推迟到主线程空闲时执行，避免阻塞 ui 渲染。具体做法是将读取逻辑包裹在异步回调中，确保不会因同步读取导致页面卡顿。
如何避免同步读取阻塞主线程
直接访问 navigator.onLine 是同步操作，若在主循环中频繁调用会阻塞事件循环。解决方法是使用 setTimeout(fn, 0) 将读取任务放入宏任务队列，或在支持的环境中用 requestIdleCallback 在空闲期执行。这样既保证了状态读取的准确性，又维持了页面的响应性。
function checkOnlineStatus() {
setTimeout(() => {
const isOnline = navigator.onLine;
console.log('当前在线状态:', isOnline);
// 根据状态执行后续逻辑
if (isOnline) {
syncData();
} else {
queueLocalActions();
}
}, 0);
}
checkOnlineStatus();网络状态变化时的实时监听方案
除了主动轮询，更推荐通过事件监听来响应网络状态变化。浏览器提供 online 和 offline 两个全局事件，绑定到 window 对象即可实现无感知的状态更新。这种方式无需手动拆分任务，由浏览器自动触发回调，适合需要即时反馈的场景。
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('online', () => {
console.log('网络已恢复');
retryPendingRequests();
});
window.addEventListener('offline', () => {
console.log('网络断开');
pauseBackgroundTasks();
});基于 navigator.onLine 为 false 时的本地缓存策略
当 navigator.onLine 返回 false 时，程序应切换至离线模式，将数据写入 IndexedDB 或 localStorage。此时不应尝试发起网络请求，而是标记待同步队列。待重新上线后，再按顺序提交缓存数据。这种策略依赖于对 onLine 状态的准确判断与任务队列的管理。
