什么是网站缓存
你有没有遇到过这种情况：第一次打开某个新闻网站特别慢，等刷新一下，突然就变得飞快？这背后大概率是“网站缓存”在起作用。简单说，缓存就是把已经加载过的网页内容暂时存起来，下次访问时不用重新下载，直接调用本地的副本，省时间也省流量。
就像你常去的便利店，店员发现你每周都买同一款酸奶，干脆就把那款摆在最前面的货架上，方便你拿——缓存也是这个道理，把常用的东西放得更近。
浏览器缓存是怎么工作的
当你第一次访问一个网页时，浏览器会从服务器下载HTML、CSS、JS和图片等资源。如果服务器在响应头里标记了这些资源可以缓存，比如设置Cache-Control: max-age=3600，那就意味着这些文件可以在本地保留一小时。
接下来这段时间里，即使你反复刷新页面，浏览器也不会重新请求这些文件，而是直接从本地读取，速度自然快得多。只有过了有效期，或者你强制刷新（Ctrl+F5），才会重新拉取最新版本。
HTTP/1.1 200 OK
Content-Type: text/css
Cache-Control: max-age=3600
Last-Modified: Wed, 10 Apr 2024 12:00:00 GMT强缓存与协商缓存的区别
强缓存完全不需要发请求到服务器，只要本地有且没过期，就直接用。它依赖Cache-Control和Expires这两个响应头来判断。
而协商缓存则不一样。比如你开了“无痕模式”，或者缓存时间到了，浏览器就会带着If-Modified-Since或If-None-Match这样的头信息去问服务器：“我手上有这个文件，是最新的吗？”如果服务器回应304 Not Modified，说明没变，浏览器继续用旧的；如果是200，则返回新内容。
CDN缓存：让数据离你更近
你在北京访问一个美国的网站，按理说延迟很高。但如果你看到加载速度还不错，可能是因为用了CDN（内容分发网络）。CDN在全球各地部署节点，把网站的静态资源复制到离用户最近的服务器上。
比如你的图片存在美国主站，但CDN已经把它同步到了上海的节点。你在上海访问时，图片实际上是从本地CDN节点加载的，速度自然快很多。CDN本身也有缓存策略，通常由网站管理员配置。
缓存也可能带来问题
缓存虽好，但也可能让你看不到最新内容。比如公司更新了官网首页设计，你同事都看到了新界面，你却还是老样子。这时候很可能就是浏览器还在用旧的缓存文件。
解决办法很简单：按F12打开开发者工具，右键刷新按钮选择“清空缓存并硬性重新加载”，或者直接清除浏览器缓存数据。开发人员通常会给新版文件加上版本号或哈希值，比如style.v2.css或main.abc123.js，这样浏览器会当成新资源重新下载。
如何查看页面是否命中缓存
打开浏览器开发者工具，切换到Network标签页，刷新页面。观察每个请求的Size列：如果显示disk cache或memory cache，说明走了缓存；如果是具体大小如23KB，那就是从网络下载的。
同时注意Status码：200（from disk cache）表示强缓存生效，304表示协商缓存成功，都是缓存起效的标志。