如何在Chrome DevTools中判断资源是否真正从缓存加载

确认图片资源命中缓存、带宽有效节省的方法 #

• 查看Network面板Status列：配置max-age的强缓存命中时，资源状态码会显示为200 OK (from memory cache) 或 200 OK (from disk cache)，此时不会向服务器发起实际网络请求。
• 查看Network面板Size列：命中缓存的资源Size列会直接标注memory cache或disk cache，而非实际文件体积，对应Transferred列会显示0 B。如果你遇到Transferred值与资源大小一致的情况，说明未命中强缓存，大概率是触发了Chrome的特殊刷新逻辑：按F5普通刷新时Chrome会自动带上Cache-Control: max-age=0请求头走协商缓存，只有在地址栏直接回车、从其他页面跳转进入当前页时，强缓存规则才会正常生效。
• 本地抓包验证：使用Fiddler、Charles等抓包工具监听设备网络请求，若页面加载过程中没有对应图片的出站HTTP请求，即可确认资源完全从本地缓存读取，没有产生带宽消耗。
• 查看请求详情：命中强缓存的请求不会向服务器发送实际请求，所以请求详情里不存在真实的Request Headers，仅能读取到本地存储的Response Headers，Timing标签页也只会显示本地内存/磁盘的读取耗时，不会有网络往返耗时。

你提到的拦截最后一个请求图片无法加载、前序请求显示传输数据的情况，前序请求大概率是预请求或协商缓存的校验请求，没有实际返回资源内容，最后一个请求才是真实的资源拉取请求。

内容的提问来源于stack exchange，提问作者Andre GolFe