缓存策略 -- 引入
对于我们日常会使用到的网页来说，只需要对链接轻轻点击即可转跳至对应页面，但是这个过程中是如何实现将服务器的资源呈现到本地浏览器的呢？初步接触的时候，我们突然就会觉得没啥想法了。因为这部分内容需要涉及到HTTP请求的缓存策略与HTTP通讯了，不过今天我们的主题是来聊聊HTTP请求的缓存策略的内容。
（提示：此次示例的网页为TapTap，其余网站均可用于分析，仅供实践参考！）
HTTP请求的缓存策略 -- 基础理论
对于我们所看到的网页，都是用图片、视频、文字、空间等等组成的一个界面。既然我们分析的是HTTP请求的缓存策略，那么我们就先在理想情况下设定它此时已经准备开始客户端请求（前提：打开的是未访问过的新网页，略去HTTP通讯的相关内容）。
在向服务端发出内容请求的时候，此时HTTP请求的缓存策略也开始启动。这里稍微与常规的流程有些差异（完整流程可见图 2 - 1），不过大体相同。
图 2 - 1
在我们首次打开新网页，本地储存尚无对应网页资源缓存，所以强缓存不会实现资源复用，但服务器响应时所设置的“Cache-Control”（例如设置“max-age”规定后续缓存时长、“no-cache”需后续验证等）、“Expires”等字段信息被浏览器接收记录，成为后续强缓存判断依据，为整个缓存策略运作拉开序幕。
在离开强缓存阶段后，随即与服务器进行再次沟通进行协商缓存机制，首次请求通过服务器返回“Last-Modified” 和 “ETag” 字段进行缓存储存，更新本地内容，随后退出整个HTTP请求的缓存策略机制。
待下次对该资源请求时，在请求头带上“If-Modified-Since”（对应上次缓存的‘Last-Modified’值）和“If-None-Match”（对应上次缓存的“ETag”值）发往服务器。服务器收到后，比对“If-Modified-Since”与当前资源实际“Last-Modified”时间，或比对“If-None-Match”与当前“ETag”标识，若资源未更新，返回 304 状态码，浏览器继续使用本地缓存；若资源已更新，返回 200 状态码及新资源内容，浏览器更新本地缓存并重置相关缓存标识”。
🎢逻辑总结
简单来说，就是首次的强缓存阶段资源未命中后，相应的进行协商缓存机制，向服务器发送缓存请求，收到缓存后记录相应关键值。等待下次再次请求时对比相应关键值判断是否需要更新资源（由服务器返回的状态码所决定）。从而完成完整的一次HTTP请求的缓存策略~
实际操作与查看
搜索任意网页，在浏览器中按下F12，进入开发者模式。当网页激活后所有的网络文件传输都可以在“开发者工具 >> 网络中看到”。（图 3 - 1）
图 3 - 1
我们可以观察到，有许多类型文件通过HTTP通讯传递过来。不过针对于这次主题，我们主要关注的是一些资源的关键标头内容，如：Cache-Control、Expires、Last-Modified、ETag、Age、Content-Type等等。
我们可以从图 3 - 1中左侧名称处随意选择一个文件进行标头查看（图中部分关键信息已遮蔽，关键内容已用蓝色荧光标出）
图 3 - 2
从图中我们可以获得以下信息：| 标头 | 内容 | 作用 |
|---|---|---|
| Cache-Control | max-age=31104000（毫秒） | 指定资源在缓存中的最大有效时长 |
| Last-Modified | Mon, 30 Sep 2024 02:45:48 GMT | 指该资源在服务器端最后一次被修改的时间 |
| ETag | "19F99D2FB9957D1EEAF6F46CF368D2EA" | 资源生成时的一个唯一标识符 |
| Age | 4147987（秒） | 在缓存代理服务器中已经存在的时长 |
| Content-Type | image/png | 缓存的资源位置与类型 |
👇当进行页面切换或是页面刷新时👇
对于此处的强缓存
- 根据
Cache-Control中的max - age值（31104000 毫秒，即约 360 天），可以得出在 360 天内如果浏览器再次请求该资源（这里是 image/png 类型的文件），浏览器会直接从本地缓存中获取该资源，而无需向服务器发送请求； Age字段的值为 4147987 秒（约 48 天），这表明该资源在缓存代理服务器中已经存在了 48 天，这个时长远小于 “max - age” 所规定的 360 天，若只考虑强缓存策略，该资源在浏览器缓存中仍被视为 “新鲜” 的，可以直接使用。
对于此处的协商缓存
- 当强缓存未命中（例如浏览器缓存被清除或者
Cache-Control过期）时，浏览器会进入协商缓存机制。此时，“Last Modified” 和 “ETag” 字段将发挥作用； - 浏览器再次请求该资源时，会在请求头中带上
If - Modified - Since（其值为 “Mon, 30 Sep 2024 02:45:48 GMT”）和If - None - Match（其值为 “19F99D2FB9957D1EEAF6F46CF368D2EA”）。服务器收到请求后，会比对当前资源的实际最后修改时间与If - Modified - Since的值，以及当前资源的实际ETag标识与If - None - Match的值。
✨结果
如果反馈给服务器的标头都匹配，说明资源没有更新，服务器将返回 304 状态码，通知浏览器可以继续使用本地缓存；如果不匹配，服务器将返回 200 状态码，并将新的资源内容发送给浏览器，同时更新浏览器缓存中的 “Last - Modified” 和 “ETag” 值。HTTP请求的缓存策略的小结
通过整个较为浅显的流程，我们从中学习到了关于缓存策略中的强缓存、协商缓存的逻辑与处理方式。所以，HTTP 缓存机制作为一个综合考虑服务器端配置、浏览器本地缓存状态以及用户操作等多方面因素的流程，通过不同的缓存判断和处理流程，能有效实现提高网页加载速度、节省服务器资源，保证用户获取到相对及时更新资源。
2024.11.23
NightToona
