React中基于useEffect+setInterval定时测速出现结果异常升高问题

核心原因 #

你遇到的测速值从43Mbps飙升到200Mbps的异常，本质是缓存命中产生的假测速结果：

• 你虽然用时间戳做了缓存破坏参数，但如果测速图片的响应头没有明确设置禁止缓存规则，浏览器和中间网络节点会对同路径的静态资源做启发式缓存。哪怕每次拼接的时间戳不同，只要请求的基础路径和历史测速图片完全一致，浏览器会直接从本地内存中读取已经下载过的图片二进制内容，不会发起真实的跨网请求。
• 这种场景下onload回调会在几十毫秒内触发，计算出的传输时长远小于真实网络耗时，最终算出的速度值会被放大数倍。
• 单次执行测速逻辑时，因为没有历史缓存记录，所有请求都是真实通过网络传输的，结果自然准确；按60秒间隔多次执行时，缓存从第二次请求开始逐步生效，速度值就会随着执行次数持续升高。

你现有排查方向的验证 #

• 关于是否需要在测速完成后销毁Image实例：这个操作不是解决问题的核心。Image对象在onload执行完成、没有被其他代码引用时，JS引擎会自动触发垃圾回收，手动将实例置空仅能避免极端场景下的内存泄漏，完全解决不了缓存带来的假速度问题。
• 关于是否需要终止onLoad的后续执行逻辑：这个逻辑仅在解决并发请求冲突时有用——如果上一次的测速请求还没返回，下一个间隔触发了新请求，多个并发Image请求会互相抢占带宽，甚至出现旧请求晚返回时，用新的时间参数计算时间差的完全失真情况。单独做终止逻辑解决不了速度飘高的核心矛盾。

可直接落地的修复方案 #

1. 彻底切断缓存影响
   首先要给测速用的静态图片资源配置响应头规则，强制所有网络节点不对资源做缓存：

   Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
   Pragma: no-cache
   Expires: 0
   

   如果无法修改资源的响应头规则，就调整缓存破坏的方式：不要把时间戳放在URL的query参数里，而是拼到请求路径中，让浏览器识别为完全独立的资源，不会触发同路径的缓存匹配逻辑。

2. 修正计时触发时机
   把开始计时的代码移到download.src赋值的紧后方，确保计时完全覆盖从请求发起到资源加载完成的全流程，避免前置代码的执行误差拉长计算的时长基准。

3. 加状态锁避免并发冲突
   给测速逻辑增加全局状态标记，上一次测速未完成时直接跳过下一次的触发，避免多个并发Image请求互相干扰：

   let isSpeedTesting = false;
   export function checkInternetSpeed() {
     if (isSpeedTesting) return;
     isSpeedTesting = true;
     const DOWNLOAD_SIZE = 609 * 101 * 32;
     const download = new Image();
     const cacheBuster = `?t=${Date.now()}`;
   
     download.onload = () => {
       const endTime = Date.now();
       showResults(endTime, startTime, DOWNLOAD_SIZE);
       isSpeedTesting = false;
       // 解绑事件引用，辅助内存回收
       download.onload = null;
       download.onerror = null;
       download = null;
     };
   
     download.onerror = () => {
       isSpeedTesting = false;
       download = null;
     };
   
     // 赋值src的瞬间记录开始时间，消除计时误差
     const startTime = Date.now();
     download.src = DOWNLOAD_IMAGE_ADDRESS + cacheBuster;
   }
   

4. 增加结果合理性校验
   在showResults函数中增加阈值判断：如果计算出的速度值远高于当前网络的理论最大带宽（比如超过家用千兆网络的1000Mbps上限），直接丢弃这次计算结果，避免缓存命中的假值展示给用户。

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