好好了解一下Cookie(强烈推荐)(4)

fs.readFile('https://www.jb51.net/article/cache.png', function(err, file) { console.log(req.headers); console.log(req.url) if (!req.headers['if-none-match']) { res.setHeader('Cache-Control', "no-cache, max-age=" + 5); res.setHeader('Content-Type', 'images/png'); res.setHeader('Etag', "ffff"); res.writeHead('200', "Not Modified"); res.end(file); } else { if (req.headers['if-none-match'] === 'ffff') { res.writeHead('304', "Not Modified"); res.end(); } else { res.setHeader('Cache-Control', "max-age=" + 5); res.setHeader('Content-Type', 'images/png'); res.setHeader('Etag', "ffff"); res.writeHead('200', "Not Modified"); res.end(file); } } });

no-store 绝对禁止缓存任何资源,也就是说每次用户请求资源时,都会向服务器发送一个请求,每次都会下载完整的资源。通常用于机密性资源。

关于Cache-Control的使用,见下面这张图(来自大额)

181841016351634

客户端的新鲜度限值

Cache-Control不仅仅可以在响应头中设置,还可以在请求头中设置。浏览器通过请求头中设置Cache-Control可以决定是否从缓存中读取资源。这也是为什么有时候点击浏览器刷新按钮和在地址栏回车,在NetWork模块中看到完全不同的结果

U_AON_N_XO_AX_P_U0B

Expires

推荐使用Expires,它指定的是具体的过期日期而不是秒数。因为很多服务器跟客户端存在时钟不一致的情况,所以最好还是使用Cache-Control.

服务器再验证

浏览器或代理缓存中缓存的资源过期了,并不意味着它和原始服务器上的资源有实际的差异,仅仅意味着到了要进行核对的时间了。这种情况被称为服务器再验证。

如果资源发生变化,则需要取得新的资源,并在缓存中替换旧资源。

如果资源没有发生变化,缓存只需要获取新的响应头,和一个新的过期时间,对缓存中的资源过期时间进行更新即可。

HTTP1.1推荐使用的验证方式是If-None-Match/Etag,在HTTP1.0中则使用If-Modified-Since/Last-Modified。

Etag与If-None-Match

根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生。浏览器会将这串字符串传回服务器,验证资源是否已经修改,如果没有修改,过程如下(图片来自浅谈Web缓存):

60HQ8__TL_6I_P_0Q15O7


__X_T_T_GHESYFLERGV52_9

上文的demo中我们见到过服务器端如何验证Etag:

FXKDYMGEYA4_M__CHTVENT2

由于Etag有服务器构造,所以在集群环境中一定要保证Etag的唯一性

If-Modified-Since与Last-Modified

这两个是HTTP1.0中用来验证资源是否过期的请求/响应头,这两个头部都是日期,验证过程与Etag类似,这里不详细介绍。使用这两个头部来验证资源是否更新时,存在以下问题:

有些文档资源周期性的被重写,但实际内容没有改变。此时文件元数据中会显示文件最近的修改日期与If-Modified-Since不相同,导致不必要的响应。

有些文档资源被修改了,但修改内容并不重要,不需要所有的缓存都更新(比如代码注释)

关于缓存的更新问题,请大家看看这里张云龙的回答,本文就不详细展开了。

本文demo代码如下:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=EDGE" /> <title>Web Cache</title> <link href="https://www.jb51.net/article/shortcut.png"> <script> </script> </head> <body> <img src="https://www.jb51.net/article/cache.png"> </body> </html> var http = require('http'); var fs = require('fs'); http.createServer(function(req, res) { if (req.url === 'https://www.jb51.net/' || req.url === '' || req.url === '/index.html') { fs.readFile('./index.html', function(err, file) { console.log(req.url) //对主文档设置缓存,无效果 res.setHeader('Cache-Control', "no-cache, max-age=" + 5); res.setHeader('Content-Type', 'text/html'); res.writeHead('200', "OK"); res.end(file); }); } if (req.url === '/shortcut.png') { fs.readFile('https://www.jb51.net/article/shortcut.png', function(err, file) { console.log(req.url) res.setHeader('Content-Type', 'images/png'); res.writeHead('200', "OK"); res.end(file); }) } if (req.url === '/cache.png') { fs.readFile('https://www.jb51.net/article/cache.png', function(err, file) { console.log(req.headers); console.log(req.url) if (!req.headers['if-none-match']) { res.setHeader('Cache-Control', "max-age=" + 5); res.setHeader('Content-Type', 'images/png'); res.setHeader('Etag', "ffff"); res.writeHead('200', "Not Modified"); res.end(file); } else { if (req.headers['if-none-match'] === 'ffff') { res.writeHead('304', "Not Modified"); res.end(); } else { res.setHeader('Cache-Control', "max-age=" + 5); res.setHeader('Content-Type', 'images/png'); res.setHeader('Etag', "ffff"); res.writeHead('200', "Not Modified"); res.end(file); } } }); } }).listen(8888)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsxpy.html