Web 性能优化五：浏览器缓存机制与预加载实践指南：别让用户每次都重新加载你的网站

你辛苦压缩了 JS、优化了图片，结果用户每次刷新页面，浏览器都重新拉一遍资源？

• 明明代码没改，用户还是加载了 1MB JS

• 明明有缓存，字体依然时常消失一下

• 明明用了 preload，页面首屏还是慢

你可能忽略了一个基础但超关键的能力：缓存 + 预加载策略。

本篇文章，我们从浏览器底层出发，梳理前端开发中该如何正确使用缓存机制和优化资源加载优先级。

一、缓存机制概览：浏览器的记忆力怎么玩？

浏览器缓存主要分两类：

类型	控制位置	生命周期	场景
强缓存（强制命中）	HTTP Header: Cache-Control / Expires	命中直接使用本地资源，不发请求	静态资源、版本固定文件
协商缓存（条件命中）	ETag / Last-Modified	浏览器发请求，服务器判断是否更新	动态内容、接口数据

常见误区：

• 浏览器地址栏输入触发的刷新会忽略部分缓存

• 强缓存不等于“永远缓存”，你可以设置过期时间或加版本标识

示例配置（静态资源强缓存 + 版本控制）：

Cache-Control: max-age=31536000
ETag: "hash-123456"

文件命名使用 hash，例如：main.abc123.js

这样你每次发布就生成新文件名，老用户依然享受缓存。

二、如何优雅地使用版本更新策略？

推荐模式：

文件内容变化 → 文件名变化

• 构建工具（如 Vite/Webpack）支持 hash 插入

• CDN 缓存命中率高，浏览器本地也不多请求

• 不用担心用户访问到“旧代码”

三、预加载（Preload）策略：你可以主动告诉浏览器“谁最重要”

标签	用途	推荐场景
<link rel="preload">	明确预加载关键资源	首屏字体、主图、核心 JS
<link rel="prefetch">	低优先级预取资源	可能下一页要用的资源
<link rel="dns-prefetch">	提前做 DNS 查询	外部资源域名
<link rel="preconnect">	提前建立连接	CDN / 第三方资源

 示例：预加载字体 + 预取下一页资源

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="prefetch" href="/about.html" />

四、常见资源优化建议

JS/CSS

• 拆包 + hash 命名

• CDN 缓存 + 浏览器缓存

• 使用 defer / async 防止阻塞渲染

图片

• 本地资源可设为长效缓存（如 1 年）

• 外链图片推荐用 CDN，防止过期或跳失

• 图片 src 变动可使用动态时间戳 ?v=2024

字体

• 子集化 + font-display: swap

• 使用 preload 防止闪字（FOIT）问题

• 自托管比 Google Fonts 更可控（国内尤甚）

五、如何监控缓存策略是否生效？

开发工具定位：

• 打开 Chrome DevTools → Network
• 观察资源列中的 Size 列：
  • from memory cache
  • from disk cache
  • 200（重新加载）

使用 Header 检查器确认：

查看响应头中是否包含：

Cache-Control: max-age=86400
ETag: "..."

总结：缓存不是“设置一下”，是持续演进的策略设计

你要做的不是“让浏览器帮你记住”，

而是明确告诉它：谁可以记，记多久，怎么记。

缓存让你资源更快，预加载让你更聪明地快。

配合版本控制、资源优先级配置与请求策略，

你就能打造一个又快又稳又可控的加载体验闭环。