一、引言 浏览器作为我们日常使用最为频繁的网络工具，其中最为重要的功能之一便是能够缓存一部分请求的资源，以提升用户体验和网络性能。本篇笔记将以Chrome浏览器为例，对其涉及的请求中的缓存策略展开具体分析。
二、缓存的分类
- 强缓存：浏览器在发出请求前，首先检查缓存中是否有资源的副本，如果有且仍然有效，浏览器会直接从缓存中返回资源，不发送请求到服务器。
- 协商缓存：在强缓存失效时，浏览器会携带相关的请求头到服务器进行验证，询问服务器该资源是否有更新，如果资源没有更新，服务器会返回304状态码，浏览器会直接从缓存中获取资源。
三、强缓存策略
- Expires：Expires是HTTP/1.0的产物，使用的是服务器时间。通过设置一个绝对过期时间，浏览器根据该时间判断资源是否过期。然而，Expires存在一些问题，例如服务器和客户端的时间可能不一致，导致强缓存失效。
- Cache-Control：Cache-Control是HTTP/1.1中引入的，并逐渐取代了Expires的使用。通过设置max-age属性，以秒为单位表示资源的有效期。优势在于客户端和服务器时间的一致性，且可以设置更多的缓存控制选项，如no-cache，no-store，public等。
四、协商缓存策略
- Last-Modified/If-Modified-Since：服务器在返回资源时，会添加一个Last-Modified头部表示资源的最后修改时间。当浏览器再次请求该资源时，会携带If-Modified-Since头部，如果服务器判断资源自上次修改时间以来没有发生变化，则返回304状态码，否则返回新的资源。
- ETag/If-None-Match：ETag是服务器为每个资源生成的唯一标识符。浏览器在请求资源时，将上次请求资源返回的ETag值通过If-None-Match头部发送给服务器。如果服务器判断资源在ETag值所代表的版本之后没有发生变化，则返回304状态码。
五、缓存策略的优化
- 合理设置缓存策略：根据资源的特性和更新频率，灵活选择强缓存和协商缓存策略，并设置合理的max-age时间。
- 使用版本号：在引用的资源URL中添加版本号或者内容的Hash值，可以让每次更新都生成新的URL，以避免缓存问题。
- 配置Cache-Control：合理设置Cache-Control头部，例如使用max-age和immutable属性，确保静态资源的持久缓存，减少网络请求和资源服务器的负载。
六、总结 Chrome浏览器通过强缓存和协商缓存机制，对请求中的资源进行缓存，以提升用户体验和网络性能。合理的缓存策略可以减少对服务器资源的请求，节省带宽，加快页面加载速度。同时，优化缓存策略也需要根据具体场景和资源更新频率进行灵活调整，以达到最佳的性能和用户体验。
