浏览器缓存：让访问更快一点
打开一个网站，图片、CSS、JS 文件每次都要重新下载？那页面加载速度肯定慢得像老牛拉车。其实这些静态资源完全可以利用浏览器缓存，用户第一次访问后，后续再进站就直接从本地读取，速度快了不少。
设置 HTTP 缓存头是关键
服务器在返回静态文件时，可以通过设置 HTTP 响应头来控制缓存行为。最常见的两个头是 Cache-Control 和 Expires。
Cache-Control: max-age=31536000, public上面这行表示该资源可以在浏览器中缓存一年（单位是秒），并且可以被代理服务器等中间节点共享缓存。如果是不敏感的静态资源，比如 logo 图片、公共 JS 库，设个长时间缓存很合适。
强缓存与协商缓存的区别
强缓存一旦命中，浏览器根本不会发请求到服务器，直接用本地副本。而协商缓存则会发一次请求，但通过 If-Modified-Since 或 If-None-Match 让服务器判断资源是否变更。如果没变，服务器返回 304，节省传输内容。
Last-Modified: Wed, 23 Oct 2024 12:00:00 GMT
ETag: "abc123"这两个字段常用于协商缓存。ETag 是资源的唯一标识，内容一改，ETag 就变，比时间戳更精确。
文件名加哈希：彻底避免旧缓存问题
有时候你会发现改了 CSS 样式，用户却看不到更新，因为浏览器还在用旧缓存。这时候可以在构建时给文件名加上哈希值，比如 style.a1b2c3d.css。只要文件内容变化，哈希就变，URL 也就变了，自然触发新下载。
现代前端打包工具如 Webpack、Vite 都支持这种输出配置，简单又有效。
CDN 缓存也不能忽视
如果你用了 CDN，静态资源其实是先缓存在离用户最近的节点上。CDN 通常有自己的缓存规则，需要在控制台或配置中设置 TTL（Time to Live）。比如把图片类资源设为 7 天，HTML 页面设为 1 小时，避免内容更新延迟。
同时注意，CDN 和浏览器缓存要配合好。别出现 CDN 返回了过期资源，浏览器还傻乎乎地长期缓存。
开发调试时的小技巧
本地改完 JS 发现没生效？大概率是浏览器缓存搞的鬼。按 F12 打开开发者工具，在 Network 选项卡勾选“Disable cache”，或者快捷键 Ctrl + F5 强制刷新，就能看到最新效果。
线上排查问题也一样，遇到静态资源异常，先看响应头有没有正确返回缓存策略，再检查文件是否真的更新了。