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

问题描述：

我设计一个单页的应用程序与普通的HTML布局，像这样：节点的js，浏览器缓存和304响应

<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标头后，所有资源都会被发送。我不明白这应该如何工作，这是一个浏览器的东西，或者我做错了什么？

答

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

希望这可以帮助某人，如果我有什么问题，请添加一些东西！

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

相关推荐