这几天因为涉及到版本的部署，会遇到测试或者客户那边抱怨，为什么版本发布后，他们打开以前收藏的网页地址，为什么不是最新的，新打开一个tab页为啥也不行，非要让我点浏览器刷新按钮，或者清除缓存才可以吗？看到问题的严重性我开始排查原因，我记得服务都是设置了no-cache 啊，为啥不行了，后面慢慢排查发现有一个服务忘记设置缓存策略了，难怪他们那种操作不能获取最新资源，为此我需要总结下这块的知识，希望下次能对相关问题，反应更迅速，以下是我花了一天时间整理的相关知识，希望可以给大家带来帮助，使用的是Edge浏览器最新版本

一. 什么是浏览器缓存

浏览器缓存是一种机制，用于在浏览器中存储已访问过的资源的副本，以便将来可以更快地加载相同的资源。它通过在本地计算机上保存资源的副本来减少对服务器的请求，并提供更快的页面加载速度和更好的用户体验。

当您访问一个网站时，浏览器会下载和解析网页上的各种资源，例如HTML、CSS、JavaScript文件、图像和其他媒体文件。这些资源可以被浏览器缓存下来，以便在将来的请求中重复使用，而不必再次从服务器上下载，浏览器缓存可以分为两个主要方面：

1. 页面缓存：浏览器会将整个页面的副本存储在缓存中，包括HTML、CSS和JavaScript等文件。当您再次访问同一页面时，浏览器会首先检查缓存，并且如果资源没有过期，它们将直接从缓存中加载，而不是从服务器重新下载。

2. 资源缓存：除了页面本身，浏览器还可以缓存页面中引用的各种资源，如图片、字体、样式表和脚本文件等。这些资源会根据其URL被存储在缓存中，并在后续请求中被复用。

浏览器缓存可以有效减少对服务器的请求次数，减轻网络流量和服务器负载，并提供更快的加载速度和更好的用户体验。然而，缓存机制也可能导致一些问题，例如缓存过期、不一致的内容更新等。为了解决这些问题，开发人员可以通过设置适当的缓存策略指令、版本控制和缓存无效化等技术来管理和控制浏览器缓存行为。

二. 浏览器缓存的原理

浏览器的缓存原理基于以下几个关键概念，了解后你会对这块的概念有更深入的认识

1. 缓存位置：浏览器将缓存分为多个层级，包括内存缓存和磁盘缓存。内存缓存较小但读取速度快，适合存储频繁访问的资源；磁盘缓存容量较大但读取速度相对较慢，适合存储不经常变动的资源。

2. 缓存策略：浏览器使用缓存策略来确定是否从缓存中加载资源还是从服务器请求最新版本。常见的缓存策略包括强制缓存和协商缓存，后面会详细介绍。

– 强制缓存：当资源被强制缓存时，浏览器会在一定时间内直接使用缓存，而无需发送请求到服务器。常见的强制缓存策略有"Cache-Control"和"Expires"头部字段。"Cache-Control"指定了资源的缓存策略，而"Expires"指定了资源的过期时间。

– 协商缓存：当资源未被强制缓存或强制缓存过期时，浏览器会向服务器发送请求，并通过协商缓存策略确定是否使用缓存。常见的协商缓存策略有"Last-Modified"和"ETag"头部字段。"Last-Modified"指示资源的最后修改时间，而"ETag"是服务器生成的资源唯一标识符。

3. 缓存验证：在进行协商缓存时，浏览器会将上一次请求的响应中的"Last-Modified"或"ETag"值与服务器进行验证，以确定缓存是否有效。如果服务器返回状态码304（Not Modified），表示资源未发生变化，浏览器将直接从缓存中加载资源；否则，服务器将返回新的资源，并替换旧的缓存。

4. 缓存控制：开发人员可以通过设置响应头部字段来控制资源的缓存行为。常见的控制字段有"Cache-Control"、"Expires"、"Last-Modified"和"ETag"等。通过设置适当的缓存控制字段，开发人员可以指定缓存策略、过期时间和验证方式等。

5. 缓存更新与过期：当服务器上的资源发生变化时，开发人员需要采取适当的措施来更新缓存。可以通过修改资源的URL，添加查询参数或版本号来强制浏览器获取新版本的资源。另外，可以设置适当的缓存过期时间，确保浏览器在一定时间后重新验证资源的有效性。

6. 缓存优先级：浏览器根据资源的优先级来决定是否缓存和如何管理缓存。通常，HTML文档的缓存优先级较低，因为HTML文档可能会包含动态内容，需要实时从服务器获取。而静态资源如图片、样式表和脚本文件的缓存优先级较高，因为它们往往不经常变化，可以被长时间缓存，可以在Nginx上对其设置不同的缓存策略。

7. 强制缓存与协商缓存的比较：强制缓存和协商缓存是两种不同的缓存机制。强制缓存通过在响应头中设置缓存策略，告诉浏览器在一定时间内直接使用缓存。协商缓存则通过与服务器进行验证，确定缓存是否有效。当强制缓存过期或未设置时，浏览器会使用协商缓存。

8. 缓存的优点与注意事项：浏览器缓存机制可以显著提高网页的加载速度和性能，并减轻服务器负载。它可以减少网络请求和传输的数据量，从而节省带宽和提高用户体验。然而，开发人员需要注意缓存的合理使用，避免缓存过多或过期时间设置不当导致用户无法获取最新的资源。此外，对于动态内容和频繁更新的资源，应采用适当的缓存策略，以确保用户获取到最新的数据。

三. 浏览器各种缓存的比较及区别

相信你经过上面的内容大概已经对浏览器缓存有个基础的认识了，但是还不太知道如何在项目中去运用这些知识，那么接下来我们进入精简环节

1. 更进一步了解浏览器在缓存相关的标签

HTTP协议中的响应头部包含了控制缓存行为的各种指令和参数。这些头部字段包括Cache-Control、Expires、Last-Modified、ETag等。

1. Cache-Control（缓存控制）：服务器可以在响应头中设置 Cache-Control 字段来指定缓存策略。常见的值包括 `no-cache`（不进行强缓存）和 `max-age`（指定缓存的有效时间）。浏览器在接收到响应时会根据 Cache-Control 字段来确定是否使用缓存。一般我们使用no-cache: 不进行强缓存，直接进入协商缓存。

2. Expires：Expires指定了资源的过期时间，即浏览器在该时间点之后会重新请求服务器获取最新的资源。过期时间可以是一个具体的日期时间或相对于当前时间的时间间隔。

3. Last-Modified和If-Modified-Since：服务器可以在响应头部中添加Last-Modified字段，指示资源的最后修改时间。当浏览器再次请求该资源时，可以发送If-Modified-Since字段，将上次获取资源的最后修改时间发送给服务器。如果资源在该时间之后未发生修改，服务器会返回一个304 Not Modified响应，告知浏览器可以继续使用缓存的副本。

4. ETag和If-None-Match：ETag是一个由服务器生成的唯一标识符，表示资源的特定版本。服务器在响应头部中添加ETag字段。当浏览器再次请求该资源时，可以发送If-None-Match字段，将之前获取资源时服务器返回的ETag值发送给服务器。如果资源的ETag与服务器上的当前版本匹配（也就是两个字段的值相等），服务器会返回一个304 Not Modified响应。

5. 强制缓存和协商缓存：根据Cache-Control和Expires指令，浏览器可以进行强制缓存或协商缓存。强制缓存意味着浏览器不会发送请求到服务器，直接使用缓存的副本。协商缓存则会向服务器发送请求，但服务器可以根据Last-Modified/If-Modified-Since和ETag/If-None-Match进行验证，决定是返回完整的资源还是304 Not Modified响应，ETag/If-None-Match的优先级要高于Last-Modified/If-Modified-Since，而且由于Last-Modified只精确到秒，ETag/If-None-Match的准确度更高。你会发现在浏览器请求资源时会出现以下几种状况，我们来看看这几种有什么区别。1.from memory cache （来自内存缓存）：在设置有强缓存的条件下生效，缓存用户经常访问的资源，浏览器关闭失效，响应速度快，不需要像服务器发起请求。2.from disk cache（来自硬盘缓存）：设置强缓存策略的条件下生效，将一些图片等其它资源存储在硬盘中（存储机制暂时不明），浏览器关闭时，缓存不会被清除，响应速度较快，不需要像服务器发送请求。3.304：协商缓存机制，像服务端发送报文验证请求，本身并不是请求资源文件，资源文件是从浏览器缓存中取。4.200加载资源：直接从服务器获取最新资源，请求时间是最久的四.用户的日常的一些浏览器操作，会对缓存有什么影响

经过实践，以下方式都不会导致强缓存失效即命中强缓存还是会从缓存中去取。1.重新输入地址，地址栏回车，导航栏切换，普通刷新（F5），重新打开一个Tab页（这个我没太明白，按道理浏览器关闭后就不会有memory cache，那么新开一个标签页按道理就没有memory cache了，但是实际场景下会有）或者从收藏夹里进入页面。

2.强制刷新

强制刷新后一些静态资源文件都是重新加载，不在走强缓存，走协商缓存，但是发现个别静态资源文件，比如logo图片这种还是会走强缓存。

3.清除缓存强制刷新

资源请求都是200，强缓存和协商缓存失效

浏览器缓存这块其实涉及到的知识点非常多和细，今天先分享到这里，如有纰漏，欢迎指出，交流。