js如何检测网络连接状态 判断网络质量的4种检测方法！

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('网络已断开');
  }
});