二次访问变快的关键是精准分层缓存：对静态资源设强缓存（Cache-Control: public, max-age=31536000, immutable），HTML用no-cache+ETag协商缓存，区分Memory/Disk/媒体缓存层，并用Service Worker等主动干预。
二次访问变快，核心是让浏览器“记得住”上次加载过的资源，而不是每次都重新下载。关键不在多缓存，而在缓存得准、用得对、更新得稳。
设置强缓存头，让静态资源长期驻留
对 CSS、JS、字体、图标、图片等不常变更的资源，通过 HTTP 响应头直接告诉浏览器“这个文件一年内不用再问服务器”：
-
Cache-Control: public, max-age=31536000, immutable —— 推荐用于带哈希名的构建产物（如
app.a1b2c3.js），浏览器跳过验证，直接读磁盘缓存 - 避免只设
Expires：它依赖客户端时间，易出错；max-age是更可靠的时间基准 - CDN 上也要同步配置，确保边缘节点也返回一致的缓存策略
合理使用协商缓存，兼顾新鲜度与复用率
对 HTML 文件或可能动态更新的资源，不能全靠强缓存，需配合服务端验证机制：
- 响应中带上 ETag 或 Last-Modified，浏览器二次请求时自动携带
If-None-Match或If-Modified-Since - 若资源未变，服务器返回
304 Not Modified，不传正文，节省带宽且毫秒级响应 - HTML 文件建议只设
Cache-Control: no-cache，靠 ETag 验证，既保更新又免重复传输
区分缓存层级，避免误清或冲突
浏览器实际有多个缓存层，各自行为不同，需针对性管理：
- Memory Cache：最快但仅限当前页面生命周期，刷新即丢，适合临时资源（如内联脚本）
- Disk Cache：持久化存储，支撑跨标签页、跨会话复用，强缓存主要落在此处
- 视频类资源（MP4、TS、HLS 切片）通常走独立的媒体缓存区，需单独清理或预加载，普通“清除缓存”不一定生效
主动干预缓存行为，应对特殊场景
纯服务端头不够时，前端可补充控制逻辑：
- 用 Service Worker 预缓存首屏关键资源（如 logo、核心 CSS、首帧视频片段），实现“安装即可用”
- 对用户高频访问的栏目页，可在空闲时 fetch 并
caches.put()进自定义缓存空间 - LocalStorage 不适合存大资源，但可缓存接口元数据（如版本号、更新时间戳），辅助判断是否需要强制刷新资源
缓存不是开个开关就完事，而是根据资源稳定性、更新频率、体积大小做分层决策。一次配对准确的 Cache-Control，比反复清理缓存更能稳定提升二次打开体验。
