JavaScript弱网检测实现：已有在线/离线检测，如何判断ping超400ms并触发警告

完全可以基于现有前端能力实现该功能，和你已经完成的上下线状态检测逻辑可以无缝衔接，不需要依赖特殊浏览器权限。

核心实现原理 #

浏览器环境不开放ICMP协议的调用权限，没办法直接调用系统的ping命令，但ping值的本质就是网络请求的往返耗时，我们可以通过轻量化的HTTP请求模拟完整往返过程，计算得到的耗时和真实ping值的偏差很小，完全满足400ms阈值的判断需求。

具体落地步骤 #

• 准备一个部署在同域下的极小尺寸静态测试资源，比如1x1像素的透明GIF，整体大小控制在几十字节，几乎没有资源传输耗时，避免资源体积干扰延迟计算结果
• 每次检测时，给测试资源的URL加上实时时间戳作为随机参数，配合cache: no-store配置，强制浏览器发起真实网络请求，不命中本地缓存，保证测到的是真实往返耗时
• 检测时用performance.now()高精度记录请求发起的时间点，在请求完整响应后记录结束时间，两者的差值就是当前网络的实际往返延迟值
• 拿到延迟值后和设定的400ms阈值做对比，达到阈值时触发对应的警告弹窗即可

落地优化要点 #

• 不要用跨域第三方CDN上的资源做测试源，不然测到的是用户到CDN边缘节点的延迟，和实际业务场景的网络情况偏差很大，测试资源最好和业务系统部署在同一服务域下
• 检测频率不要设太高，建议每2-3秒发起一次检测，频率过高会消耗不必要的带宽，给服务器增加无意义的请求压力
• 给阈值判断加防抖逻辑，连续2-3次检测的延迟都超过阈值再弹警告，避免单次网络抖动就触发提示，干扰用户
• 网络恢复正常后，要自动关闭之前弹出的弱网警告，不用等用户手动关闭
• 可以结合浏览器原生的Network Information API做辅助校验，navigator.connection.rtt字段会返回浏览器估算的当前网络往返时间，不需要额外发请求就能拿到，可以和主动测的HTTP延迟值交叉判断，降低误报概率

参考核心代码 #

const LATENCY_WARN_THRESHOLD = 400;
let continuousOverCount = 0;
let pingTimer = null;

async function pingTest() {
  const start = performance.now();
  try {
    await fetch(`/test-ping.gif?ts=${Date.now()}`, {
      cache: 'no-store',
      mode: 'same-origin'
    });
    const currentLatency = performance.now() - start;
    if (currentLatency >= LATENCY_WARN_THRESHOLD) {
      continuousOverCount++;
      if (continuousOverCount === 2) {
        showWarnPopup(`当前网络延迟偏高，实时值为${Math.round(currentLatency)}ms`);
      }
    } else {
      continuousOverCount = 0;
      hideWarnPopup();
    }
  } catch (err) {
    // 请求异常逻辑可复用现有离线检测能力
  }
}

// 对接你现有的事件回调
function onlineDetect() {
  // 网络在线时启动定时检测
  pingTimer = setInterval(pingTest, 3000);
}

function offlineDetect() {
  // 网络离线时停止检测，节省资源
  clearInterval(pingTimer);
  continuousOverCount = 0;
}

内容的提问来源于stack exchange，提问作者scrummy