浏览器不使用缓存数据

问题描述

编辑：这完全是由于 Cache-control max-age 设置中的拼写错误，使用了冒号而不是等号。

在我的 Web 应用程序中，我使用 socket.io 根据服务器端的实时输入向客户端动态显示图像。在客户端，我基本上使用 <img id="image"/> 并按照

var updateImage = socket.on("updateImage",function(src) {
    document.getElementById("image").src = src;
});

图像都在一个静态数据库中，所以为了加快后期转换的速度，我希望客户端缓存所有图像。由于现代浏览器几乎缓存了所有内容，因此我只使用 <img id="precache" style="display:none"/> 和一种循环数据库的机制，一个接一个地加载此容器中的每个图像。

我可以看到图像在连接到服务器后立即开始加载和缓存，例如通过在 dev-tools 中（在 Qutebrowser 上）监控网络以及通过监控浏览器缓存目录的大小。

但是，当我随后尝试动态更改显示的图像时，网络监控建议再次从服务器下载请求的图像，因为 dev-tools 选项卡中报告的大小是图像的完整大小，在与浏览器使用缓存时通常报告的几个字节形成对比。相应地，显示转换滞后于再次下载图像所需的时间。

为什么客户端不使用缓存的数据？

如果它有任何相关性：

• 与 Firefox 相同的行为（延迟显示转换）

• 应用程序由一个简单的 node.js http 服务器提供服务，静态图像按照

   fs.readFile(imagePath,"UTF-8",function(err,file){
       res.writeHead(200,{
           "Content-Type": "image/svg+xml","Cache-control": "max-age: 4800,must-revalidate"
       });
       res.end(file);
   });
  

解决方法

缓存控制设置中的错字：使用等号，而不是冒号。

fs.readFile(imagePath,"UTF-8",function(err,file){
    ...
        /* was max-age: 4800 */
        "Cache-control": "max-age=4800,must-revalidate"
 ...