什么是HTML缓存？如何控制缓存行为-html教程-PHP中文网

什么是HTML缓存？如何控制缓存行为

畫卷琴夢

发布： 2025-08-04 11:49:01

原创

589人浏览过

html缓存通过浏览器保存网页副本以提升加载速度、减少服务器压力，但不当的缓存策略可能导致用户看到过期内容。控制缓存行为主要依赖http响应头：1. cache-control 是核心指令，可设置max-age定义缓存有效期，public或private控制缓存范围，no-cache要求重新验证，no-store禁止缓存；2. expires指定绝对过期时间，但依赖客户端时间，建议优先使用cache-control；3. etag通过资源唯一标识符实现精确验证，资源变化即更新标识；4. last-modified基于文件最后修改时间进行验证，精度低于etag。强制刷新（ctrl+shift+r）通常绕过缓存，但若服务器返回304仍可能使用缓存，设置cache-control: no-cache可确保验证。避免缓存问题的方法包括：在url中添加版本号（如style.css?v=1.0）使浏览器视为新资源；使用cdn缓存静态资源并提供全局加速与管理功能；利用service worker实现精细控制，支持离线访问；对动态内容设置短缓存或禁用缓存。前端常见缓存策略有：强缓存（通过cache-control或expires直接使用本地缓存）、协商缓存（通过etag或last-modified向服务器验证）、cdn缓存和service worker缓存。清除缓存方式包括：手动清除浏览器缓存、使用开发者工具清理、强制刷新页面，或通过设置cache-control: no-cache/no-store从服务端禁止缓存。正确理解并应用这些机制能有效平衡性能与内容更新，提升用户体验。

什么是HTML缓存？如何控制缓存行为

HTML缓存，简单来说，就是浏览器把你访问过的网页“记住”了。下次再访问同一个网页，浏览器就不用重新从服务器下载，而是直接用本地保存的“副本”，速度嗖嗖的。但有时候，这个“记住”反而会带来麻烦，比如网页更新了，你看到的还是旧版本。所以，控制缓存行为很重要。

浏览器缓存HTML页面，本质上是为了提升用户体验，加快页面加载速度，减少服务器压力。但如果缓存策略不当，会导致用户看到过期内容，影响用户体验。

控制HTML缓存行为，其实就是控制浏览器如何以及何时使用缓存。

立即学习“前端免费学习笔记（深入）”；

如何设置HTML缓存？

主要通过HTTP响应头来控制，比如

Cache-Control

登录后复制

、

Expires

登录后复制

、

ETag

登录后复制

和

Last-Modified

登录后复制

。

Cache-Control: 这是最强大的武器，可以设置缓存的最大有效期(
```
max-age
```
登录后复制
)，是否允许缓存(
```
public
```
登录后复制
或
```
private
```
登录后复制
)，是否需要重新验证(
```
no-cache
```
登录后复制
或
```
no-store
```
登录后复制
)等等。例如：
```
Cache-Control: max-age=3600, public
```
登录后复制
表示缓存有效期为3600秒，允许公共缓存（如CDN）缓存。
```
Cache-Control: no-cache
```
登录后复制
表示每次使用缓存前，都需要向服务器验证。
```
Cache-Control: no-store
```
登录后复制
表示禁止缓存。
Expires: 这是一个比较老的header，用来设置缓存的过期时间。但它依赖于客户端的时间，如果客户端时间不准确，可能会导致缓存失效。建议优先使用
```
Cache-Control
```
登录后复制
。例如：
```
Expires: Thu, 01 Dec 2024 16:00:00 GMT
```
登录后复制
ETag: ETag是一个资源的唯一标识符。当浏览器再次请求该资源时，会将ETag发送给服务器，服务器会比较本地资源的ETag和浏览器发送的ETag是否一致。如果一致，说明资源没有修改，服务器返回304 Not Modified，浏览器使用缓存；如果不一致，说明资源已经修改，服务器返回新的资源和新的ETag。
Last-Modified: Last-Modified表示资源最后一次修改的时间。与ETag类似，浏览器会将Last-Modified发送给服务器，服务器会比较本地资源的Last-Modified和浏览器发送的Last-Modified是否一致。如果一致，说明资源没有修改，服务器返回304 Not Modified，浏览器使用缓存；如果不一致，说明资源已经修改，服务器返回新的资源。

ETag和Last-Modified的区别在于，ETag可以更精确地判断资源是否修改，即使资源内容没有变化，但服务器可能修改了资源的元数据，ETag也会发生变化。

强制刷新页面后缓存会失效吗？

一般情况下，强制刷新（通常是Ctrl+Shift+R或Cmd+Shift+R）会绕过浏览器的缓存，直接从服务器请求最新的资源。但具体行为取决于浏览器的实现和服务器的配置。有些浏览器在强制刷新时，仍然会检查缓存的ETag或Last-Modified，如果服务器返回304 Not Modified，则仍然使用缓存。为了确保强制刷新能够真正获取最新的资源，可以设置

Cache-Control: no-cache

登录后复制

，强制每次都向服务器验证。

如何避免缓存导致的问题？

除了设置合适的HTTP响应头，还可以使用以下方法：

版本号控制: 在资源URL中添加版本号，例如
```
style.css?v=1.0
```
登录后复制
。当资源更新时，修改版本号，浏览器会认为这是一个新的资源，从而重新下载。

存了个图
视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

17

查看详情
使用CDN: CDN可以缓存静态资源，并将其分发到全球各地的服务器上，从而加快页面加载速度。同时，CDN也提供了缓存控制的功能。
Service Worker: Service Worker是一个运行在浏览器后台的脚本，可以拦截网络请求，并使用缓存或从服务器获取资源。Service Worker可以实现更精细的缓存控制，例如离线访问。
动态内容: 对于动态内容，应该避免缓存，或者设置较短的缓存时间。

前端开发中，常见的缓存策略有哪些？

常见的缓存策略包括：

强缓存: 浏览器直接使用本地缓存，不向服务器发送请求。通过
```
Cache-Control: max-age
```
登录后复制
或
```
Expires
```
登录后复制
实现。
协商缓存: 浏览器向服务器发送请求，服务器判断资源是否修改，如果没有修改，返回304 Not Modified，浏览器使用缓存；如果修改了，返回新的资源。通过
```
ETag
```
登录后复制
和
```
Last-Modified
```
登录后复制
实现。
CDN缓存: CDN服务器缓存静态资源，加快页面加载速度。
Service Worker缓存: 使用Service Worker拦截网络请求，并使用缓存或从服务器获取资源。

如何清除浏览器缓存？

清除浏览器缓存的方法有很多：

手动清除: 在浏览器设置中，可以找到清除缓存的选项。
使用开发者工具: 在开发者工具中，可以找到清除缓存的选项。
强制刷新: 使用Ctrl+Shift+R或Cmd+Shift+R强制刷新页面。
使用HTTP响应头: 设置
```
Cache-Control: no-cache
```
登录后复制
或
```
Cache-Control: no-store
```
登录后复制
，禁止浏览器缓存。