当前位置：首页 > JavaScript

js实现网络延迟

2026-03-16 00:04:11JavaScript

测量网络延迟的方法

使用 JavaScript 的 Performance API 可以测量网络请求的延迟。performance.now() 方法返回一个高精度时间戳，单位为毫秒，可用于计算请求的耗时。

const start = performance.now();
fetch('https://example.com/api')
  .then(response => response.json())
  .then(data => {
    const end = performance.now();
    const latency = end - start;
    console.log(`Network latency: ${latency} ms`);
  });

使用 WebSocket 测试延迟

WebSocket 提供全双工通信，适合测试实时延迟。通过发送和接收消息的时间差计算延迟。

js实现网络延迟

const socket = new WebSocket('wss://example.com/socket');
let startTime;

socket.onopen = () => {
  startTime = performance.now();
  socket.send('ping');
};

socket.onmessage = (event) => {
  if (event.data === 'pong') {
    const endTime = performance.now();
    const latency = endTime - startTime;
    console.log(`WebSocket latency: ${latency} ms`);
  }
};

使用 XMLHttpRequest 测量延迟

XMLHttpRequest 是传统的 AJAX 请求方式，通过监听请求的各阶段时间戳计算延迟。

js实现网络延迟

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    const latency = performance.now() - xhr.startTime;
    console.log(`XHR latency: ${latency} ms`);
  }
};
xhr.startTime = performance.now();
xhr.send();

使用 Resource Timing API

Resource Timing API 提供了更详细的资源加载时间信息，可以分析网络请求的各个阶段耗时。

const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  console.log(`Resource: ${resource.name}`);
  console.log(`DNS lookup time: ${resource.domainLookupEnd - resource.domainLookupStart} ms`);
  console.log(`Connection time: ${resource.connectEnd - resource.connectStart} ms`);
  console.log(`Request duration: ${resource.responseEnd - resource.requestStart} ms`);
});

使用 navigator.connection

navigator.connection 提供了网络连接信息，包括估算的下行速度和往返时间（RTT）。

if ('connection' in navigator) {
  const connection = navigator.connection;
  console.log(`Effective network type: ${connection.effectiveType}`);
  console.log(`Estimated RTT: ${connection.rtt} ms`);
  console.log(`Downlink speed: ${connection.downlink} Mbps`);
}