一. 分类浏览器的缓存,从状态码来看一共有两种304:确认没有修改200:不发请求,直接读取缓存从设置方式来看,有四种(暂不考虑Service Worker)maxAgeApplication CacheLast-Modified/If-Modified-SinceEtag/If-None-MatchmaxAge设置方法:var expires = new Date();var maxAge = 606024*365;expires.setTime(expires.getTime() + maxAge * 1000);response.setHeader(“Expires”, expires.toUTCString());response.setHeader(“Cache-Control”, “max-age=” + maxAge);说明:浏览器在发送请求之前由于检测到Cache-Control和Expires(Cache-Control的优先级高于Expires,但有的浏览器不支持Cache-Control,这时采用Expires), 如果没有过期,则不会发送请求,而直接从缓存中读取文件。Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。 只不过Cache-Control的选择更多,设置更细致,如果同时设置的话,其优先级高于Expires。备注:chrome中只有通过链接跳转访问才可以,f5是不管用的,‘Cache-Control’ is always set to ‘max-age=0′Application Cache因为大量的bug已经不建议使用,略Last-Modified/If-Modified-Since设置方法fs.stat(realPath, function (err, stat) { var lastModified = stat.mtime.toUTCString(); var ifModifiedSince = “If-Modified-Since”.toLowerCase(); response.setHeader(“Last-Modified”, lastModified); if (request.headers[ifModifiedSince] && lastModified == request.headers[ifModifiedSince]) { response.writeHead(304, “Not Modified”); response.end(); }})说明:response 设置Last-Modified头,request便会带上If-Modified-Since头,需要手动比较,并返回304备注Last-Modified标注的最后修改只能精确到秒级;有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形。Etag/If-None-Match设置方法var hash = crypto.createHash(‘md5’).update(file).digest(‘base64’);response.setHeader(“Etag”, hash);if (request.headers[‘if-none-match’] && request.headers[‘if-none-match’] === hash) { response.writeHead(304, “Not Modified”); response.end(); return;}说明:response设置Etag头,request便会自动带上if-none-match头;需要手动比较,并返回304适用于文件更新,但是内容并没有修改的情况,比如目前前端的打包。流程图 graph TB start(浏览器请求) –> hasAppcache{appcache?} hasAppcache – YES –> 200cache[200 从缓存读取] hasAppcache – NO –> ce{Cache-Control/Expires</br>是否有效} ce – YES –> 200cache ce – NO –> etag{has Etag?} etag – YES –> ifNoMatch[向服务器请求带if-None-Match] etag – NO –> lastModify{has Last-modified?} lastModify – YES –> hasLastModify[向服务器请求带if-Modified-Since] lastModify == NO ==> 200server[200 从服务器读取] ifNoMatch –> match{match?} match -. YES .-> 304cache[304 从缓存读取] match == NO ==> 200server hasLastModify –> lessThenModifiedSince{lastModified</br><=</br>ifModifiedSince?} lessThenModifiedSince -. YES .-> 304cache lessThenModifiedSince == NO ==> 200server 参考文章 https://github.com/etoah/BrowserCachePolicy
浏览器缓存小结
December 28, 2018 · 1 min · jiezi