如何检测网页连接质量？求WebApp用户即时网络监控JS方案

一、原生浏览器API方案 #

现代浏览器提供的Navigator.connection（Network Information API）是轻量且可靠的原生方案，无需额外请求即可获取核心网络指标：

• effectiveType：返回当前网络类型（如4g/3g/2g/slow-2g）
• rtt：估算的网络往返时间（毫秒）
• downlink：估算的下行带宽（Mbps）
• saveData：判断用户是否开启数据节省模式

示例代码：

// 获取当前网络状态
function getNetworkStatus() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  if (connection) {
    console.log({
      网络类型: connection.effectiveType,
      往返延迟: `${connection.rtt}ms`,
      下行带宽: `${connection.downlink}Mbps`,
      数据节省模式: connection.saveData
    });
  } else {
    console.log('当前浏览器不支持Network Information API');
  }
}

// 监听网络状态变化
navigator.connection?.addEventListener('change', getNetworkStatus);

该方案开销极低，适合作为基础监控手段。

二、优化版自定义Ping方案 #

针对普通Ajax Ping的局限性，可通过以下方式优化：

• 用静态资源替代接口请求：请求1x1像素的空PNG（<1KB），避免服务器业务逻辑带来的延迟干扰
• 多样本取均值：连续发送3-5次请求，剔除极值后取平均延迟，降低单次波动误差
• 动态调整检测间隔：网络良好时每30秒检测一次，网络较差时缩短至5秒
• 统计丢包率：记录请求失败比例，判断网络稳定性

示例代码：

async function measurePing(url = '/static/empty.png', sampleCount = 3) {
  let totalDelay = 0;
  let successCount = 0;
  for (let i = 0; i < sampleCount; i++) {
    const start = performance.now();
    try {
      await fetch(url, { cache: 'no-store' }); // 禁用缓存保证真实请求
      const delay = performance.now() - start;
      totalDelay += delay;
      successCount++;
    } catch (err) {
      // 请求失败，计入丢包
    }
    await new Promise(resolve => setTimeout(resolve, 100)); // 样本间短间隔避免队列阻塞
  }
  return {
    平均延迟: successCount > 0 ? `${(totalDelay / successCount).toFixed(2)}ms` : '无有效数据',
    丢包率: `${(((sampleCount - successCount) / sampleCount) * 100).toFixed(2)}%`
  };
}

// 启动动态调度的Ping监控
function startPingMonitor() {
  let interval = 30000; // 初始30秒一次
  const monitor = async () => {
    const result = await measurePing();
    console.log('Ping检测结果:', result);
    // 根据网络质量调整检测间隔
    if (parseFloat(result.平均延迟) > 500 || parseFloat(result.丢包率) > 20) {
      interval = 5000; // 差网络5秒一次
    } else {
      interval = 30000;
    }
    setTimeout(monitor, interval);
  };
  monitor();
}

三、WebSocket实时监控优化 #

如果使用WebSocket，可通过以下方式提升监控准确性：

• 双向心跳包：客户端定时发送小体积心跳包，服务器立即返回，计算往返延迟
• 连接状态监听：通过onclose/onerror事件判断连接是否中断或异常
• 消息传输成功率统计：记录发送消息数与收到响应数，计算丢包率
• 带宽测试：定期发送固定大小的二进制数据，计算传输时间估算实际带宽

示例代码片段：

const ws = new WebSocket('wss://your-server.com/ws');
let heartbeatInterval;
let heartbeatCount = 0;
let responseCount = 0;

ws.onopen = () => {
  console.log('WebSocket连接成功');
  // 启动心跳检测
  heartbeatInterval = setInterval(() => {
    const timestamp = Date.now();
    ws.send(JSON.stringify({ type: 'heartbeat', timestamp }));
    heartbeatCount++;
  }, 10000); // 10秒一次心跳
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'heartbeat-response') {
    const delay = Date.now() - data.timestamp;
    responseCount++;
    console.log('WebSocket心跳延迟:', `${delay}ms`);
    const lossRate = `${(((heartbeatCount - responseCount) / heartbeatCount) * 100).toFixed(2)}%`;
    console.log('WebSocket丢包率:', lossRate);
  }
};

ws.onclose = () => {
  clearInterval(heartbeatInterval);
  console.log('WebSocket连接断开');
  // 可添加自动重连逻辑
};

四、综合监控策略 #

将原生API与自定义方案结合，实现更全面的监控：

1. 用Navigator.connection获取基础网络参数，作为初始判断依据
2. 用优化后的Ping或WebSocket持续检测延迟与丢包率
3. 根据监控结果给用户展示网络质量分级（优秀/良好/一般/差），甚至自动调整WebApp行为（如切换低分辨率资源）

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