HTML浏览器缓存（Browser Cache）

悦涵仙子2024-08-19 17:44

介绍：

浏览器缓存是Web缓存中最直接、最常见的一种形式。当浏览器首次请求某个资源时，如果服务器响应中包含了缓存控制指令（如Cache-Control、Expires等），浏览器就会将这些资源存储在本地缓存中。后续请求相同资源时，如果缓存未过期，浏览器将直接从缓存中加载资源，而无需再次向服务器发起请求。

浏览器缓存分为两种：强制缓存和协商缓存。

一、强制缓存

浏览器第一次向服务器发送请求，服务器返回资源，并设置Cache-Control: max-age=一串数字，这一串数字就是过期时间，例如设置一小时后过期，则max-age=3600。

浏览器第二次向服务器发送请求。

如果max-age没有过期，例如在一小时内请求资源，则从缓存中拿资源。

如果max-age已过期，则进行下一步判断协商缓存。

代码示例（设置HTTP响应头以控制缓存）：

javascript 复制代码

HTTP/1.1 200 OK  
Cache-Control: max-age=3600  // 缓存有效期为1小时  
Content-Type: text/html  
...

二、协商缓存

关键词：Last-Modified、E-Tag

浏览器第一次向服务器发送请求，服务器返回资源，并设置资源标识（Last-Modified或者E-Tag），将资源和标识码存在缓存中。

浏览器第二次向服务器发送请求和资源标识（If-Modified-Since或者If-None-Match），服务器根据资源标识判断当前缓存里的资源是否是最新资源。

如果不是最新资源，服务器返回状态码200并重新发送最新资源和最新的资源标识码。

如果是最新资源，服务器返回状态码304，并从缓存中拿资源。

资源标识

Last-Modified：资源上一次修改的时间。对应发送请求的资源标识：If-Modified-Since
ETag：资源对应的唯一字符串。对应发送请求的资源标识：If-None-Match

优先使用ETag，更精确。