节点 js、浏览器缓存和 304 响应答案

【问题标题】：node js, browser cache and 304 response节点 js、浏览器缓存和 304 响应
【发布时间】：2017-10-29 12:31:03
【问题描述】：

我正在设计一个具有正常 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 标头之后，所有资源也在发送。我不明白这应该如何工作，这是浏览器的问题还是我做错了什么？

【问题讨论】：

标签： javascript html node.js http http-headers

【解决方案1】：

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

希望这对某人有帮助，如果我有任何错误，请添加一些东西！

【讨论】：