浏览器缓存机制

浏览器缓存机制是前端性能优化中至关重要的一环，它通过缓存之前请求过的文件，以提高页面再次访问时的加载速度。

一、浏览器缓存的作用

1. 减少数据传输：缓存减少了不必要的数据传输，节省了带宽。
2. 减轻服务器负担：通过缓存，服务器不需要处理重复的请求，从而减轻了负担。
3. 提升访问速度：缓存使得页面加载更加迅速，提升了用户体验。

二、浏览器缓存的类别

浏览器缓存主要分为两类：强制缓存（也称为强缓存）和协商缓存（也称为弱缓存）。

三、强制缓存

1. 定义

强制缓存是指浏览器在发起请求前，会先检查本地缓存中是否有满足条件的资源。如果有，则直接使用缓存资源，不再向服务器发起请求。

2. 控制字段

• Expires：HTTP/1.0引入，表示资源会在某个绝对时间后过期。由于它依赖于客户端时间，可能存在误差，因此HTTP/1.1中引入了Cache-Control来替代它。
• Cache-Control：HTTP/1.1引入，用于控制缓存的行为。它包含多个指令，如max-age（表示资源在多少秒内有效）、no-cache（表示需要协商缓存）、no-store（表示不缓存任何内容）等。Cache-Control的优先级高于Expires。

3. 缓存位置

• 内存缓存（Memory Cache）：存储当前页面中已经抓取到的资源，如样式、脚本、图片等。读取速度快，但缓存持续性短，随进程释放而释放。
• 硬盘缓存（Disk Cache）：覆盖面最广，绝大部分的缓存都来自Disk Cache。读取速度相对较慢，但持久性强。

四、协商缓存

1. 定义

当强制缓存失效后，浏览器会携带缓存标识（如Last-Modified或ETag）向服务器发起请求，由服务器根据缓存标识决定是否使用缓存。

2. 控制字段

• Last-Modified / If-Modified-Since：HTTP/1.0引入。Last-Modified表示资源在服务器上的最后修改时间；If-Modified-Since是浏览器在请求时携带的字段，表示资源在客户端的最后修改时间。服务器通过比较这两个时间来决定是否返回304状态码（表示资源未修改，使用缓存）或200状态码（表示资源已修改，返回新资源）。
• ETag / If-None-Match：HTTP/1.1引入，用于替代Last-Modified / If-Modified-Since。ETag是服务器为资源生成的一个唯一标识（hash值）；If-None-Match是浏览器在请求时携带的字段，表示资源在客户端的唯一标识。服务器通过比较这两个标识来决定是否返回304或200状态码。ETag / If-None-Match的优先级高于Last-Modified / If-Modified-Since。

五、浏览器缓存过程

1. 浏览器发起请求：首先检查本地缓存中是否有满足条件的资源。
2. 强制缓存判断：如果有，则根据Cache-Control或Expires字段判断资源是否过期。
   • 如果未过期，则直接使用缓存资源。
   • 如果已过期，则进入协商缓存阶段。
3. 协商缓存判断：浏览器携带缓存标识向服务器发起请求。
   • 服务器根据请求头中的If-Modified-Since或If-None-Match字段判断资源是否修改。
   • 如果未修改，则返回304状态码，浏览器使用缓存资源。
   • 如果已修改，则返回200状态码和新资源，浏览器更新缓存。

六、缓存机制的优缺点

优点：

• 减少了不必要的数据传输，节省了带宽。
• 减轻了服务器的负担，提升了网站性能。
• 加快了客户端加载网页的速度，提升了用户体验。

缺点：

• 如果资源有更改，而缓存未及时更新，可能导致用户获取到滞后的信息。