js如何检测网络抖动 5种延迟检测方法评估网络稳定性

function getNetworkLatency() {
  if (performance.timing) {
    const timing = performance.timing;
    const dnsLookupTime = timing.domainLookupEnd - timing.domainLookupStart;
    const tcpConnectTime = timing.connectEnd - timing.connectStart;
    const requestTime = timing.responseStart - timing.requestStart;
    const responseTime = timing.responseEnd - timing.responseStart;
    const latency = timing.responseStart - timing.navigationStart; // 从页面加载到接收到第一个字节的时间

    console.log('DNS Lookup Time:', dnsLookupTime, 'ms');
    console.log('TCP Connect Time:', tcpConnectTime, 'ms');
    console.log('Request Time:', requestTime, 'ms');
    console.log('Response Time:', responseTime, 'ms');
    console.log('Latency:', latency, 'ms');

    return latency;
  } else {
    console.warn('Performance API not supported.');
    return null;
  }
}

const latency = getNetworkLatency();

function getResourceLatency(url) {
  performance.getEntriesByType('resource').forEach(entry => {
    if (entry.name === url) {
      const latency = entry.responseStart - entry.startTime;
      console.log(`Latency for ${url}:`, latency, 'ms');
      return latency;
    }
  });
  return null;
}

const imageUrl = 'https://example.com/image.jpg';
const imageLatency = getResourceLatency(imageUrl);

const socket = new WebSocket('ws://example.com/socket');

socket.onopen = () => {
  console.log('WebSocket connected');
  sendHeartbeat();
};

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'heartbeat_response') {
    const rtt = Date.now() - data.timestamp;
    console.log('RTT:', rtt, 'ms');
    // 可以将 RTT 存储到数组中，然后计算平均值、最大值、最小值等，来判断网络抖动情况
  }
};

socket.onclose = () => {
  console.log('WebSocket disconnected');
};

function sendHeartbeat() {
  const timestamp = Date.now();
  socket.send(JSON.stringify({ type: 'heartbeat', timestamp: timestamp }));
  setTimeout(sendHeartbeat, 5000); // 每 5 秒发送一次心跳包
}