「前端」详解前端缓存，解决前端换包之后环境中仍会出现旧版效果

后端工程项目修正了许多东西：比如bug啊，式样啊。当你把后端工程项目装箱后心满意足的在 Nginx（OWL）穿起它，接着在 Jira 上修正bug状态@波季尔ED500。接着波季尔开始找你battle了，你的bug怎么却是没修正啊，但你没错穿起了最新的版，中间到底再次出现了甚么难题。打开控制面板的 network，显示总的来看。

难题就出在 from disk cache 这玩意儿上，也是应用程序缓存，应用程序加载的却是缓存中旧版的天然资源，图形出来的却是旧版的效用。除了 disk cache 外，还有其他四类应用程序缓存，总体而言，应用程序缓存大致分为4种，而这4种方式是有错误率次序的，多于依次搜寻缓存且都没有命中的时候，才会去允诺互联网：

Service Worker：是一类独立于主缓存之外的 Javascript 缓存。它脱离于应用程序控件，能帮我们实现app缓存、消息发送和互联网全权等功能。Memory Cache：存有缓存中的缓存。包括现期中网页中早已截取到的天然资源,例如网页上早已浏览的式样、脚本、相片等。因为储存有缓存中，MemoryCache 是反应速度最慢的一类缓存，但虽然同样的原因，缓存可持续性十分钟，会随着进程的释放出来而释放出来，一旦我们停用 Tab 网页，缓存中的缓存也就被释放出来了。Disk Cache：Disk Cache 也是储存有硬碟中的缓存，加载速度快点，但甚么都能储存到硬盘中，比之 Memory Cache 胜在耗电量和储存及时性上。会依照 HTTP Herder 中的表头判断甚么样天然资源须要缓存，甚么样天然资源能不允诺直接采用，甚么样天然资源早已已过期须要重新允诺。Push Cache：Push Cache 是 HTTP2 在 server push 期存有的缓存，当以上四种缓存都没有投弹时，它才会被采用，Push Cache 是一类存有于会话期的缓存，当 session 中止时，缓存也随之释放。不同的网页只要共享资源了同一 HTTP2 连接，那么它们就能共享资源同一 Push Cache。

其实常见的情况下多于 disk Cache 和 memory cache，如下图博客园主页允诺右图：

至于甚么情况下是存有缓存，却是存有硬碟。虽然计算机系统缓存有限，而且比硬碟耗电量小许多，应用程序会依照计算机系统详细情况来决定缓存放在缓存中却是硬碟中。一般情况下，较大的 css 文档、js 文档和 jpg 相片这类大文档会被取走硬碟；现期系统缓存采用量高的话，文档也会被优先选择储存进硬碟；而 Base64 文件格式的相片，几乎永远能被放进缓存。

那为甚么须要缓存呢，对后端来说，因为读缓存不须要发起允诺，也就不须要考虑允诺环境和速度，提高访问速度，用户体验大大提升；对于后端而言，也缓解了服务器的压力，减少互联网 IO 消耗，减少带宽消耗。

但甚么时候须要缓存，甚么时候不须要缓存。很明显，我这种换版操作肯定是须要重新获

强缓存

不会向服务器发送允诺，直接从缓存中加载天然资源。状态码：200，显示 from disk cache 或 from memory cache。通过设置两种 HTTP Header 实现：Expires和Cache-Control。

1.Expires：值是一个时间戳，表示本地时间到这个设置的时间缓存就失效。这样一来 Expires 是有难题的，受限于本地时间，我直接手动去把电脑端的时间改掉，都能导致缓存失效，所以更推荐采用 Cache-Control，或者二者搭配采用。

在 Nginx中配置写法如下：

# gif、jpg、jpeg、png、bmp、ico这类的天然资源会在30天后失效location ~ \.(gif|jpg|jpeg|png|bmp|ico)$ {root /XXXX/xxxx;expires 30d;

2.Cache-Control：错误率比 Expires 高，同时设置 Expires 和 Cache-Control 则后者生效。能在允诺头或者响应头中设置，并且能组合采用多种指令：

private（默认）：只能在应用程序中缓存, 多于在第一次允诺的时候才访问服务器，若有 max-age，则缓存期间不访问服务器 public：能被任何缓存区缓存，如：应用程序、服务器、全权服务器等 no-cache：能缓存，但每次都应该去服务器验证缓存是否可用，进入协商缓存期，若有 max-age，则缓存期间不访问服务器， no-store：不仅不能缓存，连暂存也不能（即：临时文档夹中不能暂存该天然资源） max-age=：以秒为单位的缓存时间，max-age=60，表示缓存60秒后失效，60秒内再次访问该天然资源，均采用本地的缓存，不再向服务器发起允诺 s-maxage=：同 max-age 作用一样，只在全权服务器中生效（比如CDN缓存），s-maxage 错误率高于 max-age，只对 public 缓存有效。设置了 s-maxage，没设置 public，全权服务器也能缓存这个天然资源 must-revalidate：可缓存但必须再向源服务器进确认 proxy-revalidate：要求中间缓存服务器对缓存的响应有效性再进行确认

在 Nginx 中配置写法如下，随便举一个指令：

location ~ .*\.(css|js|swf|php|htm|html )$ {add_header Cache-Control no-store;

协商缓存

当 Cache-Control 和 Expires 已过期或者它的属性设置为 no-cache 时（即不走强缓存），那么应用程序第二次允诺时就会与服务器进行协商，服务器端会对比判断天然资源是否进行了修正更新，对比结果无非是以下两种：

如果服务器端的天然资源没有修正（Not Modified），那么就会返回304状态码，告诉应用程序能采用缓存中的数据。如果数据有更新就会返回200状态码，服务器就会返回更新后的天然资源并且将缓存信息一起返回。

至于应用程序是怎么和服务器交互，主要是依靠跟协商缓存相关的header头属性：Last-Modified/If-Modified-Since、ETag/If-None-Match。这些属性在允诺头和响应头是成对再次出现的。

1.Last-Modified/If-Modified-Since：

应用程序在第一次访问天然资源，或缓存过期后访问，服务器返回天然资源的同时，在 response header 中添加 Last-Modified 的 header，值是这个天然资源在服务器上的最后修正时间，应用程序接收缓存文档和header信息。随后我们每次允诺时，应用程序会自动带上一个叫If-Modified-Since 的时间戳表头给服务器，它的值正是上一次 response 返回给它的 Last-modified 值，接着服务器会依照 If-Modified-Since 的值对比天然资源的最后修正时间判断天然资源是否进行了修正更新。

2.ETag/If-None-Match ：

Etag是由服务器为每个天然资源生成的唯一的标识字符串，这个标识字符串是基最初的标识符字符串。那么下一次允诺时，应用程序就会在允诺头里就会带上一个值相同的、名为 if-None-Match 的字符串供服务器比对。Etag 的错误率会比 Last-Modified 高，但Etag因为要生成，也会更消耗服务器性能。