打开浏览器的开发者工具，切换到 Network 面板，刷新页面后你会看到一堆加载的资源文件。这时候，如果你想确认某个资源是否命中了缓存，其实有几种直观的方式可以判断。
看请求的耗时
一个最简单的办法就是看请求时间。如果某个文件加载特别快，比如显示 2ms 或者 “(memory cache)” 这样的提示，那基本可以确定它走了缓存。尤其是静态资源如 JS、CSS、图片等，第二次访问通常会从内存或磁盘缓存中读取，不会重新发请求到服务器。
观察 Size 列信息
在 Network 面板的表格里，有一列是 Size。这里的状态很关键：
- 如果显示
200 (from memory cache)，说明这个资源是从内存缓存读取的； - 如果是
200 (from disk cache)，那就是从磁盘缓存加载的； - 如果看到的是具体字节数，比如
12.4 KB，那就代表这次是真实请求，没有走缓存。
结合请求头分析
点击某个请求，进入 Headers 标签页，查看 Response Headers 中是否有 Cache-Control 或 Expires 字段。比如：
Cache-Control: max-age=3600
Expires: Wed, 01 Jan 2025 08:00:00 GMT这说明该资源在有效期内可以直接使用缓存。再看 Request Headers 中有没有 If-Modified-Since 或 If-None-Match，如果有，并且服务器返回了 304，就表示协商缓存生效，虽然发起请求，但内容没变，依然算缓存命中。
模拟首次访问与二次访问
你可以先清空缓存，然后刷新页面看一遍所有资源的加载情况，再刷新一次，对比两次的 Size 和 Time 差异。比如第一次某个脚本花了 200ms 下载，第二次变成 4ms 并标注 from disk cache，这就是典型的缓存命中表现。
禁用缓存时的对比
在 Network 面板顶部有个“Disable cache”的勾选项。勾上它之后，所有请求都会绕过本地缓存，强制从服务器拉取。这时候你会发现很多资源都变成了完整的 HTTP 请求，Size 显示实际体积，Time 也明显变长。取消勾选后再刷新，就能清楚看出哪些资源本来是可以被缓存复用的。
日常调试网页性能时，关注缓存是否生效非常实用。特别是做前端优化或者排查更新不生效的问题，通过 Network 面板快速判断缓存状态，能省去不少瞎猜的时间。