JS检测网络连接状态和质量的核心方法包括：1.使用navigator.online判断是否在线，但其准确性有限；2.通过请求小图片或api接口判断网络是否连通；3.使用fetch api发起请求并判断响应状态；4.通过测量响应时间评估网络质量。具体而言，navigator.online仅能作为辅助手段，实际更推荐通过image对象或fetch api发起网络请求，若请求成功则说明网络连通，否则可能断开；同时，可记录请求开始和结束时间计算响应时间，从而评估网络质量，响应时间越短质量越高；此外，虽然浏览器提供了online和offline事件用于监听网络变化，但其依赖的navigator.online并不可靠，因此建议结合定期执行checknetworkstatus函数提高准确性；需要注意的是，这些方法均受服务器负载、dns解析等因素影响，建议多次测量取平均值以提升判断可靠性。
JS检测网络连接状态，简单来说就是看看用户是不是在线，以及网络质量如何。但别指望它能像专业测速工具那样精准，毕竟浏览器能提供的API有限。
直接上解决方案：
navigator.onLine 可以告诉你当前浏览器是否认为自己在线。但这玩意儿不太靠谱，有时候即使断网了，它也可能返回true。所以，别太依赖它。
判断网络质量的4种检测方法！
如何更可靠地检测网络状态？
navigator.onLine 只能作为辅助判断，更靠谱的方法是发起一个网络请求，比如请求一个小的图片或者API接口。如果请求成功，说明网络是通的；如果请求失败，那大概率就是断网了。
function checkNetworkStatus() { return new Promise((resolve, reject) => { const img = new Image(); img.src = 'https://www.example.com/pixel.png?t=' + new Date().getTime(); // 添加时间戳防止缓存 img.onload = () => resolve(true); img.onerror = () => resolve(false); }); } checkNetworkStatus().then(isOnline => { if (isOnline) { console.log('网络已连接'); } else { console.log('网络已断开'); } });
这种方法虽然比 navigator.onLine 靠谱，但也有局限性。比如，如果你的网站被防火墙屏蔽了，或者DNS解析有问题，这个方法也会认为网络是断开的。
除了图片，还能用什么来检测网络？
除了图片，还可以使用 fetch API 请求一个小的json文件。fetch API 提供了更丰富的配置选项，可以设置超时时间、请求头等等。
function checkNetworkStatus() { return fetch('https://www.example.com/api/ping', { mode: 'no-cors', // 避免跨域问题 cache: 'no-cache' // 避免缓存 }) .then(response => response.ok) .catch(() => false); } checkNetworkStatus().then(isOnline => { if (isOnline) { console.log('网络已连接'); } else { console.log('网络已断开'); } });
mode: ‘no-cors’ 可以避免跨域问题，cache: ‘no-cache’ 可以避免缓存。response.ok 可以判断请求是否成功。
如何判断网络质量？
判断网络质量是个更复杂的问题。简单来说，可以通过测量请求的响应时间来判断。响应时间越短，网络质量越好；响应时间越长，网络质量越差。
function checkNetworkQuality() { const startTime = new Date().getTime(); return fetch('https://www.example.com/api/ping', { mode: 'no-cors', cache: 'no-cache' }) .then(response => { const endTime = new Date().getTime(); const responseTime = endTime - startTime; console.log('响应时间：', responseTime, 'ms'); return responseTime; }) .catch(() => { console.log('网络请求失败'); return Infinity; // 返回一个很大的值，表示网络质量很差 }); } checkNetworkQuality().then(responseTime => { if (responseTime < 200) { console.log('网络质量：非常好'); } else if (responseTime < 500) { console.log('网络质量：良好'); } else if (responseTime < 1000) { console.log('网络质量：一般'); } else { console.log('网络质量：差'); } });
需要注意的是，响应时间受到很多因素的影响，比如服务器的负载、网络的拥塞程度等等。所以，仅仅通过响应时间来判断网络质量是不够准确的。可以多次测量响应时间，取平均值，这样可以得到更可靠的结果。
如何监听网络状态的变化？
浏览器提供了 online 和 offline 事件，可以监听网络状态的变化。
window.addEventListener('online', () => { console.log('网络已连接'); }); window.addEventListener('offline', () => { console.log('网络已断开'); });
但是，正如前面提到的，navigator.onLine 并不靠谱，所以 online 和 offline 事件也可能不准确。更可靠的方法是使用前面提到的 checkNetworkStatus 函数定期检测网络状态。
总而言之，JS检测网络状态和质量并没有完美的解决方案。需要根据实际情况选择合适的方法，并结合多种方法来提高准确性。
