Question

我正在设计一个具有正常html布局的单页应用程序，如下所示：

<html>
  <head>
    <title>...</title>
    <link rel="stylesheet" media="all" type="text/css" href="css/main.css">
    ...more meta tags
  </head>
  <body>
    <!--body generated with templates-->
    <script src="js/main.js"></script>
  </body>
</html>

在node.js服务器上：

route.get(req, function(url, type, hdr) {
  if (type === 'error') {
    //response 404
  }else if (type === 'page') {
    console.log(url);
    fileSys.stat(url, function(err, stat) {
      if (err) {
        res.statusCode = 404;
        res.setHeader("Content-Type","text/plain");
        res.write("404 Not Found");
        res.end();
      }else {
        var file,
        headers = {},
        modif = req.headers['if-modified-since'];
        if (modif && new Date(modif).getTime() === stat.mtime.getTime()) { //STATUS 304
          headers = {
            'Last-Modified': stat.mtime.toUTCString(),
            'Date': new Date().toUTCString()
          };
          res.writeHead(304, headers);
          res.end();
        }else { //STATUS 200
          if (path.extname(url) === '.jpg' || path.extname(url) === '.png')
            file = fileSys.readFileSync(url);
          else {
            if (fileSys.statSync(url).isDirectory())
              url += '/index.html';
            file = fileSys.readFileSync(url, 'binary');
          }
          headers = {
            'Last-Modified': stat.mtime.toUTCString(),
            'Content-Length': stat.size,
            'Cache-Control': 'public, max-age=31536000',
            'ETag': url+'_'+stat.mtime.getTime(),
            'Date': new Date().toUTCString()
          };
          var contentType = contentExtens[path.extname(url)];
          if (contentType)
            headers['Content-Type'] = contentType;
          res.writeHeader(200, headers);
          res.end(file);
        }
      }
    });
  }
});

我正在处理没有Express的路由，而我遇到的问题是在清除Chrome缓存后，刷新我的索引页面和服务器端我正在记录记录索引页面的所有请求，css， js，favicon和所有图片。但是当我再次重新加载索引页面时，唯一的请求是没有资源的索引页面。在浏览器控制台中，一切都是304并从缓存加载。这是正常的行为吗？如果我对图像或任何资源文件进行一些更改，我无法比较mtime，因为这些请求没有被发送。

我还注意到在Safari上设置缓存，最后修改和etag标头后仍会发送所有资源。我不明白这应该如何运作，这是浏览器还是我做错了什么？

Answer 1

我不太明白浏览器上的缓存是如何工作的，直到我阅读this article并且它让我看到了我将所有内容缓存一年的事实。每次都会请求主页面，但页面的资源会缓存一年，并且在用户清除缓存或一年过去之前不会请求它们。因此，解决方案是将Cache Control设置为no-cache并将ETag设置为某个值。在这种情况下，将发送对每个资源的请求，由您决定是否已修改任何内容。或者继续缓存很长一段时间，但无论何时修改资源，都要在index.html页面中附加一些值（例如：main.V4.js或mycss.x845.css）。浏览器将遇到此新文件名并发送新请求。

希望这对某人有所帮助，如果我有什么不妥，请加点内容！

节点js，浏览器缓存和304响应

1 个答案: