Http 缓存机制详解：揭秘 Web 性能优化之道

2024-02-19 19:38:31

HTTP 缓存是一种让浏览器或代理服务器临时存储网站内容的机制，从而减少重复请求的开销，提升网页加载速度和用户体验。

HTTP 缓存机制主要通过以下步骤实现：

HTTP 缓存机制主要由以下几个 HTTP 头字段控制：

Cache-Control：这是最重要的 HTTP 缓存控制字段，它允许服务器和浏览器指定资源的缓存行为。常用的 Cache-Control 指令包括：
- max-age：指定资源在本地缓存中存储的最长时间（以秒为单位）。
- no-cache：指示浏览器不要使用本地缓存的副本，而必须每次都向服务器发送请求。
- no-store：指示浏览器不要将资源存储在本地缓存中。
- must-revalidate：指示浏览器在使用本地缓存的副本之前必须向服务器确认该副本是否仍然有效。
- proxy-revalidate：指示代理服务器在使用本地缓存的副本之前必须向服务器确认该副本是否仍然有效。
Expires：指定资源的过期时间（以绝对时间格式表示）。如果资源的 Expires 头字段早于当前时间，则浏览器或代理服务器将不会使用本地缓存的副本。
Last-Modified：指定资源最后修改的时间（以绝对时间格式表示）。如果本地缓存的副本的 Last-Modified 头字段早于服务器上该资源的 Last-Modified 头字段，则浏览器或代理服务器将从服务器重新加载该资源。
ETag：指定资源的唯一标识符。如果本地缓存的副本的 ETag 头字段与服务器上该资源的 ETag 头字段不一致，则浏览器或代理服务器将从服务器重新加载该资源。

地址栏回车：地址栏回车会刷新页面，但不会强制浏览器重新加载资源。浏览器将首先检查本地缓存中是否有该资源的副本，如果本地缓存中有该资源的副本，并且缓存未过期，浏览器将直接从本地缓存中获取该资源。如果本地缓存中没有该资源的副本，或缓存已过期，浏览器将向服务器发送请求以获取该资源。
F5：F5 键会强制浏览器重新加载页面，无论本地缓存中是否有该资源的副本，浏览器都会向服务器发送请求以获取该资源。
ctrl+F5：ctrl+F5 会强制浏览器重新加载页面，并清除本地缓存。浏览器将直接向服务器发送请求以获取该资源，无论本地缓存中是否有该资源的副本。

当下最有效的缓存策略包括：

使用 CDN：CDN 可以将网站或应用程序的内容缓存到多个分布在全球各地的服务器上，从而减少用户访问网站或应用程序时延迟。
使用 Service Worker：Service Worker 是一种可以在浏览器后台运行的脚本，它可以拦截浏览器对网络资源的请求，并从本地缓存中提供这些资源。
使用 HTTP/2：HTTP/2 是一种新的 HTTP 协议，它支持并行连接和多路复用，从而可以显著提高网站或应用程序的性能。
使用 Brotli 压缩：Brotli 是一种新的压缩算法，它可以显著减小网站或应用程序的资源大小，从而减少加载时间。