为何JavaScript实现的网速测试无法得到准确结果？

前端使用JavaScript可以得到接近真实值的网速检测结果，你当前方案和专业测速站结果偏差较大，主要来自以下可优化的误差来源：

• 测试资源部署问题：你使用第三方公开图床的测试图片，图床服务器本身存在带宽上限、访问限流、链路调度优先级低的问题，且无法保证测试节点到用户的链路质量，专业测速站点普遍会选用边缘CDN节点部署测试资源，且会预留充足的带宽冗余避免服务器侧成为测速瓶颈。
• 测试逻辑缺陷：仅单次下载单张18MB左右的图片，无法规避TCP慢启动阶段、瞬时网络波动的影响，专业测速站点通常会先下载小体积文件完成TCP链路预热，再使用多个大体积资源并行下载，多轮测试后剔除异常值再取平均结果。
• 耗时统计逻辑误差：你当前统计的耗时包含了DNS解析、TCP握手、TLS握手的非数据传输阶段耗时，这部分耗时会拉低最终计算的网速值，准确的测速应该仅统计实际数据传输阶段的耗时。
• 传输大小统计错误：你固定写死的18300000字节是图片原始体积，若服务器开启了gzip、brotli等传输压缩，实际传输的字节数远小于原始体积，直接用原始体积计算会导致结果严重偏低。

现有代码优化建议 #

你可以从以下几个方向调整原有代码缩小误差：

1. 将测试资源部署到你自己的CDN节点上，关闭测试资源的传输压缩，配置足够的缓存规则避免测试资源被中间节点缓存。
2. 调整测试逻辑：先下载100KB以内的小文件完成链路预热，再连续下载3-5个20MB以上的测试文件，剔除最快和最慢的测试结果后取平均值。
3. 改用XMLHttpRequest或Fetch API的进度事件统计传输耗时和实际传输字节数，相比Image的onload事件可以获取更准确的传输数据：

// 示例：使用XHR获取准确传输数据
function measureSpeed() {
  const xhr = new XMLHttpRequest();
  let startTime, endTime;
  xhr.open('GET', '你的测试资源地址?cache_buster=' + Date.now(), true);
  xhr.responseType = 'blob';
  xhr.onloadstart = () => {
    startTime = Date.now();
  };
  xhr.onprogress = (e) => {
    if (e.lengthComputable) {
      // 可以实时计算当前速度
      const currentTime = Date.now();
      const duration = (currentTime - startTime) / 1000;
      const speedMbps = ((e.loaded * 8) / (1024 * 1024) / duration).toFixed(2);
      console.log(`当前速度：${speedMbps} Mbps`);
    }
  };
  xhr.onload = () => {
    endTime = Date.now();
    const duration = (endTime - startTime) / 1000;
    const loaded = xhr.response.size;
    const speedMbps = ((loaded * 8) / (1024 * 1024) / duration).toFixed(2);
    console.log(`最终速度：${speedMbps} Mbps`);
  };
  xhr.send();
}

调整完成后你的测试结果可以和专业测速站的误差控制在10%以内，符合普通测速场景的使用需求。

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