编辑“︁HTML缓存策略”︁

= HTML缓存策略 =

'''HTML缓存策略'''是网页性能优化的关键技术之一，通过合理利用浏览器和服务器缓存机制，减少重复资源加载，从而提升页面加载速度和用户体验。本指南将详细介绍缓存的基本原理、实现方式及实际应用案例。

== 缓存基础 ==

缓存（Caching）是指将静态资源（如HTML、CSS、JavaScript、图片等）存储在本地或中间服务器中，避免每次请求时都从原始服务器重新下载。缓存策略的核心目标是：
* 减少网络请求次数
* 降低服务器负载
* 加快页面渲染速度

=== 缓存类型 ===
浏览器缓存主要分为两类：
# '''强缓存'''：直接使用本地副本，无需与服务器验证（通过<code>Cache-Control</code>和<code>Expires</code>头控制）
# '''协商缓存'''：需向服务器验证资源是否过期（通过<code>Last-Modified</code>/<code>If-Modified-Since</code>或<code>ETag</code>/<code>If-None-Match</code>头控制）

== HTTP头字段详解 ==

以下是控制缓存的关键HTTP头字段：

=== Cache-Control ===
最常用的缓存控制指令，可设置多种参数：
<syntaxhighlight lang="http">
Cache-Control: max-age=3600, public
</syntaxhighlight>
常用指令：
* <code>max-age=[秒]</code>：资源有效期
* <code>public</code>：允许代理服务器缓存
* <code>private</code>：仅允许浏览器缓存
* <code>no-cache</code>：需协商缓存验证
* <code>no-store</code>：禁止缓存

=== ETag / Last-Modified ===
协商缓存验证字段：
<syntaxhighlight lang="http">
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2022 07:28:00 GMT
</syntaxhighlight>

== 缓存策略实现 ==

=== 服务器配置示例 ===
Apache服务器配置（.htaccess）：
<syntaxhighlight lang="apache">
<FilesMatch "\.(html|htm)$">
    Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>
</syntaxhighlight>

Nginx配置：
<syntaxhighlight lang="nginx">
location ~* \.(html|htm)$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}
</syntaxhighlight>

=== Service Worker缓存 ===
现代浏览器可通过Service Worker实现高级缓存：
<syntaxhighlight lang="javascript">
// 注册Service Worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
}

// sw.js示例
const CACHE_NAME = 'my-site-cache-v1';
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll([
                '/index.html',
                '/styles/main.css',
                '/scripts/main.js'
            ]))
    );
});
</syntaxhighlight>

== 缓存流程图解 ==
<mermaid>
graph TD
    A[用户请求资源] --> B{缓存是否存在?}
    B -->|是| C{是否过期?}
    B -->|否| D[从服务器获取]
    C -->|未过期| E[使用缓存]
    C -->|已过期| F[发送验证请求]
    F --> G{服务器验证?}
    G -->|未修改| H[304 Not Modified]
    G -->|已修改| D
    H --> E
</mermaid>

== 实际应用案例 ==

=== 案例1：新闻网站 ===
需求：首页内容每小时更新，但静态资源长期不变
解决方案：
* HTML设置：<code>Cache-Control: max-age=3600</code>
* 静态资源设置：<code>Cache-Control: max-age=31536000</code>（1年）并添加版本哈希：
<syntaxhighlight lang="html">
<link href="/styles/main.css?v=1.2.3" rel="stylesheet">
</syntaxhighlight>

=== 案例2：单页应用(SPA) ===
需求：应用壳(App Shell)快速加载，内容动态更新
解决方案：
* 使用Service Worker缓存App Shell
* API数据设置<code>Cache-Control: no-cache</code>

== 数学原理 ==
缓存效率可以用命中率公式表示：
<math>
Hit\ Ratio = \frac{Number\ of\ cache\ hits}{Total\ number\ of\ requests}
</math>

== 常见问题 ==

'''Q: 如何强制更新已缓存的资源？'''
A: 两种方法：
1. 修改文件名或添加查询参数（如<code>style.css?v=2</code>）
2. 使用内容哈希（如<code>style.a1b2c3d4.css</code>）

'''Q: 缓存设置过长会导致什么问题？'''
A: 用户可能无法及时获取更新，需配合版本控制策略使用。

== 最佳实践 ==
* 对频繁变化的HTML使用较短缓存时间（如1小时）
* 对静态资源使用长期缓存并添加指纹
* 重要更新考虑使用<code>cache-busting</code>技术
* 始终为HTML设置<code>must-revalidate</code>避免过时内容

通过合理配置缓存策略，可使网站加载速度提升50%以上，同时显著降低服务器负载。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML性能优化]]