全栈开发高可扩展，高可维护性当当书城WebApp-他得驱驰我得闲

浏览器缓存无法获取最新的页面资源。

工作中遇到的问题

全栈开发高可扩展，高可维护性当当书城WebApp

download：https://www.zxit666.com/5651/

实践中有时会发现，前端更新上线项目后，用户的浏览器仍然显示旧版本的页面，需要刷新浏览器才能获得最新的页面内容。或者前端有下载静态资源的链接。当文件改变但链接保持不变时，我们总是下载文件的旧版本，而不是再次从静态资源服务器请求它。

浏览器缓存是前端优化中的一个重要问题，缓存可以带来很多好处:

减少冗余数据传输，节省带宽；

为了减轻服务器的请求负担，如果有缓存，那么向服务器发送较少的请求是很重要的，特别是对于一些访问量大的网站。

从资源缓存中读取，不需要向服务器发送请求并等待返回，加快了客户端的访问速度。

但用户访问时，浏览器读取缓存资源，用户无法获取最新页面，影响用户使用。会造成以上问题。缓存是一把双刃剑。我们在享受它带来的好处和便利的同时，也要接受和理解它可能带来的问题。

internet explorer缓存

浏览器缓存主要指http缓存，其机制是根据http消息的缓存标识符进行相应的操作。

http状态代码

打开控制台的网络栏，注意状态和大小栏，会看到200状态磁盘缓存和内存缓存。

刷新页面，您将看到304和200个内存缓存。

00和304是两种常见的http状态代码。200表示文件已更改，304表示文件未更改。两者都是服务器举报的。在上面的两个图中，我们注意到一些200是灰色的，灰色的200表示请求没有发送到服务器，而是直接从缓存中读取。从缓存读取可分为从内存缓存读取或从磁盘缓存读取。

内存缓存状态代码中的描述200为灰色。从内存中读取先前加载的资源，而无需请求服务器。当页面关闭时，内存将释放资源。当再次打开同一页面时，这种情况不会发生，但只有在刷新同一页面时才会发生。通常，脚本、字体和图片会存储在内存中。来自磁盘缓存的状态代码200是灰色的。如果从磁盘中读取以前加载的资源，在没有请求服务器的情况下，当页面关闭时，您不会被释放。这部分资源会存储在电脑磁盘中，只有在用户手动清空浏览器缓存时才会释放。一般非脚本会存储在内存中，比如css，从服务器下载最新的资源，数值为200。数值是从服务器获得的总资源大小，数值为304。如果您访问服务器并发现资源尚未更新，请使用本地资源。该值是与服务器通信的消息的大小，而不是资源本身的大小。

而size列的值是“预取缓存”，这是浏览器的预取机制。

浏览器中有三个级别的缓存原则:

1.先找内存，如果内存中有，就从内存中加载；

2.如果在内存中找不到，选择硬盘获取，如果在硬盘中找到，从硬盘加载；

3.如果在硬盘中找不到，则进行网络请求，加载的资源缓存在硬盘和内存中；

参考一个简单的。

结合以上工作中遇到的问题，假设一个用户打开了我们的页面，那么我们更新文件，用户再次访问。资源加载情况是从磁盘缓存200，浏览器根本不请求服务器，所以无法获取新的资源文件。

缓存进程分析

要解决前面提到的问题，你需要知道你的浏览器的缓存机制。

浏览器缓存有两种:强制缓存和协商缓存(对比缓存)。

1.强制缓存

当浏览器向服务器发出请求时，服务器会将缓存规则放入HTTP响应消息的HTTP头中，并连同请求结果一起返回给浏览器。控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Control的优先级高于Expires。

用户第一次访问页面后，浏览器将数据存储在缓存中，在过期时间内不会再次请求服务器。是否使用强制缓存取决于资源是否过期，过期时间从第一个请求的服务器响应头中获取。如果在过期时间内，它从缓存中读取；如果超过了到期时间，它就使用协商高速缓存(如下所述)。上述来自内存缓存的200个和来自磁盘缓存的200个是强制缓存。

2.协商缓存

协商缓存是浏览器和服务器之间的协商，所以浏览器每次都要和服务器通信。

第一次请求服务器时，服务器会返回资源，并返回该资源的一个缓存ID，该ID将存储在浏览器的缓存数据库中。当第二次请求资源时，浏览器将首先向服务器发送缓存标识符。服务器得到标识符后，会判断标识符是否匹配。如果不匹配，说明资源已经更新，服务器会将新的数据和新的缓存标识符返回给浏览器。如果缓存标识符匹配，则意味着资源没有更新，并返回304状态代码，浏览器将读取本地缓存服务器中的数据。

与协商高速缓存相关的字段是last-modified/IF-modified-since、Etag/IF-no-Match。

Last-Modified和ETag可以一起使用。服务器会优先验证ETag。如果一致，将继续与Last-Modified进行比较，最终决定是否返回304。

用户打开浏览器，发现是旧资源，于是手动刷新页面，得到了新资源。为什么？

用户的不同行为会影响缓存:

1.用户第一次访问页面-200值大小，并与服务器通信。服务器返回所有资源大小，浏览器根据缓存规则缓存获取的数据。

2.更新项目。用户打开的页面是旧的资源——来自磁盘缓存的200，命中强缓存，使用本地缓存，不请求服务器。

3.用户手动刷新页面以获得新的资源-200数值。当用户刷新，强缓存失败，使用协商好的缓存时，发现根据缓存标识修改了资源，服务器返回所有新的资源和缓存标识。

4.用户再次刷新页面——304数值，协商缓存，资源不修改。数值不是完整的资源大小，而是消息信息大小。同时，会有一些来自存储器的资源200存在于存储器中的情况。

不同情况下的流程可以参考下图:

解决办法

如果是一些静态的资源链接，比如一个文档，我们想在用户每次点击下载的时候获取最新的文档，可以在链接后面加一个随机参数。对于js和css文件，我们在使用打包工具时，通常会在css和js名称前添加哈希值，所以每次生成的js和css都是唯一的，不会出现缓存问题。但是对于index.html，需要使用协商缓存而不是强缓存，并将html文件的Cache-Control设置为no-store。