图片小于50KB时网页刷新延迟至5秒的技术求助

原需求为给摄像头图像添加边界框并在网页展示，以下是原实现及遇到的问题：

原实现代码 #

Python 代码 #

cv.imwrite("rgb.jpg", rgb_img, [int(cv2.IMWRITE_JPEG_QUALITY), 95]) # 图像大小 53 KB

JavaScript 代码 #

function ref() {
    var url = "rgb.jpg";
    fetch(url, {cache: 'reload', mode: 'no-cors'})
    $('#refimg').attr('src',url);
    timerID = setTimeout("ref()", 1000);
}

HTML 代码 #

<img style="-webkit-user-select: none;" width="300" height="200" id="refimg" alt="loading..." />

问题现象 #

原实现可每秒获取最新图像，但因图片较大存在闪烁、图像截断问题。压缩图像大小后：

cv.imwrite("rgb.jpg", rgb_img, [int(cv2.IMWRITE_JPEG_QUALITY), 94]) # 图像大小 48 KB

发现当图像大小小于50KB时，相同JavaScript代码下网页变为每5秒刷新一次。尝试webp、png等格式，只要图像大小低于50KB均出现该问题。

原因分析 #

核心问题出在浏览器/服务器的缓存策略：

• 你用的fetch虽然加了cache: 'reload'，但mode: 'no-cors'会让这个缓存控制参数失效，跨域模式下浏览器会忽略部分HTTP头，缓存规则不受代码控制。
• 当文件体积小于50KB时，浏览器或服务器会启用更激进的默认缓存策略（比如强缓存），缓存过期时间默认约5秒，导致浏览器重复使用本地缓存，不会每秒请求新图像。
• 大文件时浏览器默认缓存策略更宽松，缓存时间极短甚至不缓存，所以能保持每秒刷新。

解决办法 #

1. 给URL添加随机参数（最直接有效） #

给图片URL拼接时间戳，让浏览器每次都识别为新资源，强制绕过缓存：

function ref() {
    var url = "rgb.jpg?t=" + new Date().getTime(); // 追加时间戳参数
    $('#refimg').attr('src', url);
    timerID = setTimeout(ref, 1000); // 直接传函数引用，比字符串调用更规范
}

注：之前的fetch请求完全无效，直接修改img的src就会触发资源请求，没必要保留。

2. 配置服务器缓存策略 #

在服务器端设置图片的Cache-Control响应头，明确禁止缓存或设置极短缓存时间：

• 推荐设置：Cache-Control: no-cache, no-store, must-revalidate，让浏览器每次请求都向服务器确认资源是否更新。
• 不同服务器配置方式不同：Nginx可在对应location块中添加该响应头；Python的Flask/Django可在返回图片时手动设置响应头。

3. 优化图片加载解决闪烁问题 #

通过预加载图片，等新图加载完成后再替换到页面，避免闪烁和截断：

function ref() {
    var img = new Image();
    img.onload = function() {
        $('#refimg').attr('src', img.src); // 加载完成后再替换DOM节点的src
    };
    img.src = "rgb.jpg?t=" + new Date().getTime();
    timerID = setTimeout(ref, 1000);
}

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