浏览器缓存简介

浏览器缓存是指浏览器在本地磁盘对用户已访问过的网页资源进行存储,以便在用户再次访问同一网页时可以直接从本地加载,而不需要再次从服务器请求数据,从而提高页面加载速度,降低服务器压力和带宽消耗。

浏览器缓存是提高网站性能的重要手段之一。合理利用缓存可以显著减少网络传输,加快页面加载速度,改善用户体验。同时也可以减轻服务器压力,降低网站带宽成本。

浏览器缓存的工作原理

1. 浏览器首次向服务器发送请求时,服务器返回资源,并在响应头中添加缓存 header。

2. 浏览器将资源和缓存标识存储在本地缓存中。

3. 下次请求时,浏览器先检查本地缓存是否存在该资源的缓存。

4. 如果存在缓存,浏览器会根据缓存标识判断缓存是否过期。

5. 如果缓存未过期,则直接从本地缓存加载资源,不再请求服务器。

6. 如果缓存已过期,浏览器会发送请求到服务器,服务器返回新的资源或304 Not Modified。

7. 如果返回304,浏览器从本地缓存加载资源。如果返回新资源,则更新本地缓存。

浏览器缓存的分类

1. 强缓存 (Strong Cache):

   • 不需要向服务器发送请求，直接从本地获取资源
   • 通过 HTTP 头部的 Cache-Control 和 Expires 字段控制
   • Cache-Control: max-age=3600 (秒)
   • Expires: Thu, 01 Dec 2022 16:00:00 GMT

2. 协商缓存 (Negotiation Cache):

   • 需要向服务器发送请求，验证资源是否过期
   • 如果没有过期，服务器返回 304 状态码，浏览器使用本地缓存
   • 通过 HTTP 头部的 Last-Modified 和 ETag 字段控制
   • Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
   • ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

3. 启发式缓存 (Heuristic Cache):

   • 当服务器响应中没有明确的缓存策略时，浏览器会根据特定规则进行缓存
   • 通常基于响应头中的 Last-Modified 字段
   • 缓存时间通常为 (Date - Last-Modified) * 10%

4. 本地存储缓存 (Local Storage Cache):

   使用 Web Storage API (localStorage 和 sessionStorage)

   a) localStorage: 提供持久化的本地存储，除非被清除，否则数据将一直存在。

   b) sessionStorage: 为每个给定的源（协议+域名+端口）提供一个独立的存储区域，该存储区域在页面会话期间可用。

5. 预加载缓存（Preload Cache）

预加载缓存是一种主动缓存策略，它允许开发者指定在页面加载过程中应该预先加载和缓存的资源。这可以通过 HTML 的 标签或 HTTP 头部来实现。

a) 使用 标签：

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

b) 使用 HTTP 头部：

Link: <https://example.com/other/styles.css>; rel=preload; as=style

预加载缓存可以提高页面的加载速度，特别是对于那些在页面渲染过程中稍后才会用到的资源。