作为一名优秀前端的你是否还不清楚浏览器的缓存机制？那么此刻就请看看下面的内容吧~

浏览器缓存是把双刃剑，使用得当将极大提升你网页的用户体验，反之则可能制造出pbug

一、浏览器缓存是什么

浏览器缓存是为了加速浏览，浏览器在用户磁盘或内存中对请求过的资源进行存储，当用户再次请求相同资源时，浏览器就会从磁盘或内存中获取缓存资源而不再向服务端请求，从而节省了网络请求所花费的时间。

那么是不是为了达到以上目的，就对资源无脑进行缓存呢？

不是的。比如服务器的资源更新了，但是由于缓存原因，用户依旧使用的是缓存中的资源，这就会导致用户使用的资源不是最新的。

那么接下来就需要详细了解浏览器的缓存流程和机制。

二、浏览器缓存流程

首先，可以认为浏览器中有这样一张映射表，它存储的是资源（和缓存信息等）与本地磁盘文件的关系。如下图：

当浏览器请求“https://xxxx/a.js”时，会先去映射表中查找是否有该资源的缓存信息，如果找到并且缓存时间未过期，那么就从本地磁盘（或内存）中获取缓存的资源（比如：C:\xxxx\a.js）。如果映射表中没有请求资源的缓存信息，那么就会向服务器请求资源，然后服务器会在响应头中返回缓存规则给浏览器，浏览器再根据它决定是否缓存以及如何缓存该资源。

浏览器第一次请求资源流程：

问：上图提到的“缓存规则”是什么呢？

答：它的作用是告诉浏览器对于该资源是否需要缓存，该如何缓存，缓存多长时间等操作。往下看[灵光一闪]

三、浏览器缓存规则

浏览器缓存规则主要有两类：

• 彻底缓存：expires、cache-control
• 协商缓存：last-modified、etag

如下图，是一个请求的响应头（response headers），它就包含了彻底缓存和协商缓存所用到的字段信息。

什么是彻底缓存

定义：只要资源的缓存时间没有过期，就从缓存中获取，否则则从服务器获取

依据：expires、cache-control

早在http1.0时期，使用的是expires字段来规定资源的过期时间，该时间是由服务器产生的绝对时间（GMT格式，如上图所示），如果客户端的时间小于该时间，那么就使用缓存。但是我们都知道客户端时间是可以手动修改的，这就会导致可能缓存一直未使用。

为解决以上问题，从http1.1开始使用cache-control来规定彻底缓存规则，如下表所示其值和含义：

还记得“请求的响应头信息”图中有个"cache-control: max-age=2678400"吗？它表示的就是从请求开始到该资源的缓存过期所经历的秒数为2678400s。

当响应头中同时含有expires和cache-control时，在使用缓存的判断上后者的优先级要高于前者。

什么是协商缓存

定义：请求未命中彻底缓存时，会向服务器发起请求，并在请求头上携带该资源在缓存映射表中的etag和last-modified信息（如果存在的话）。然后浏览器根据请求的响应状态码决定是否使用缓存。

依据：etag、last-modified

特点：不管资源有没有修改，都会向服务器发起请求

etag：文件的唯一标识，只要文件修改后，该值就会修改

last-modified：文件的最后修改时间

在第一次请求资源后，浏览器会将响应中的缓存规则存入缓存映射表。在第二次请求时，如果未命中彻底缓存（比如：max-age过期了，cache-control值为no-cache或no-store），并且缓存信息中含有etag或last-modified信息，浏览器就会在请求头上对应的携带这样两个信息：if-none-match: W/"98e1-lY6zj2gtniVAqQ203cSuog"和if-modified-since: Fri, 25 Jun 2021 16:03:41 GMT。

服务器就会根据这些值和最新的资源所产生的etag和last-modified值做对比，如果发现不相同，则返回最新资源和最新的etag或last-modified，浏览器将新的缓存规则更新到映射表中。反之则返回304状态码，浏览器就使用缓存数据。

问：为什么需要etag呢？有了last-modified不就可以了么？

答：其实主要有两个原因，第一，有时候文件的内容并未修改，仅仅改变了其修改时间，这时其实还是可以使用缓存的。第二，如果文件修改很频繁，并且频率在秒级以下，从“请求的响应头信息”图可发现last-modified精度只能到秒。所以if-modified-since只能感知秒级的修改。所以etag的存在还是很有必要的。

提示：etag的优先级会高于last-modified

总结

我们用一张流程图来概括以上所讲的浏览器缓存机制：