打开开发者工具，进入Network面板
平时调试网页性能时，很多人会忽略浏览器的缓存机制。其实通过Chrome的Network面板，可以快速判断资源是否命中了缓存。按下F12打开开发者工具，切换到Network标签页，刷新页面就能看到所有请求的加载情况。
关注Size列判断缓存状态
在Network面板中，有一列叫Size，它显示的是资源的传输大小。如果某条请求显示的是“from disk cache”或“from memory cache”，说明这个资源是从缓存中读取的，没有走网络请求。
比如你访问一个新闻网站，首页的logo图片和CSS文件通常不会每次重新下载。第二次打开时，这些静态资源大概率会显示from disk cache，这就是缓存命中的直接体现。
结合Headers和Response验证缓存策略
点击某个请求，查看它的Headers信息。如果响应头（Response Headers）中包含cache-control: max-age=3600，说明该资源允许被缓存1小时。
再看Request Headers里有没有if-modified-since或if-none-match，有的话表示浏览器在向服务器“确认”资源是否更新。如果服务器返回304 Not Modified，也属于缓存生效的一种——虽然有请求，但数据没重传。
HTTP/1.1 304 Not Modified
server: nginx
date: Mon, 08 Apr 2025 10:23:00 GMT
connection: keep-alive禁用缓存时的表现
有时候你想对比有无缓存的区别。可以在Network面板上方勾选“Disable cache”选项，这时所有资源都会强制从服务器拉取，Size列就不会出现from cache的提示了。
开发过程中常这么做，确保改过的JS或CSS能实时生效。但上线后记得关闭这个选项，否则看不出真实用户的加载体验。
实际应用场景举例
比如你在做电商活动页优化，发现首屏加载慢。通过Network面板一看，几个关键图片都显示from memory cache，说明缓存设置没问题。问题可能出在JS执行阻塞上，而不是缓存策略。
反过来，如果本该缓存的CSS每次都是200状态码重新下载，那就要检查服务端配置了，可能是CDN没开启缓存，或者响应头漏写了cache-control。
学会看缓存命中，能帮你更快定位性能瓶颈，少走很多弯路。