可通过PerformanceResourceTiming的transferSize等字段准确推断缓存命中：transferSize为0且decodedBodySize>0表示强缓存命中，transferSize>0且状态码304表示协商缓存生效，结合X-Cache响应头可识别CDN或Service Worker缓存，统计命中率并关联Navigation Timing验证性能收益。
不能直接读取“缓存命中”布尔值，但可以通过 PerformanceResourceTiming 接口中的 transferSize 和 decodedBodySize 等字段，结合响应头与加载行为，准确推断资源是否命中浏览器缓存。
用 transferSize 判断本地缓存是否生效
transferSize 表示实际从网络接收的字节数。这是最可靠的核心指标：
- 若
transferSize === 0且decodedBodySize > 0，基本可确认该资源来自内存或磁盘缓存（强缓存命中） - 若
transferSize > 0但远小于首次加载值，且响应状态码为304 Not Modified，说明协商缓存生效 - 若
transferSize接近decodedBodySize且状态码为200，则未命中缓存，完整下载
结合 X-Cache 响应头识别 CDN 或 Service Worker 缓存
浏览器不暴露缓存层级，但服务端可通过响应头传递缓存状态：
- Service Worker 中可在 fetch 响应中添加自定义头：
response.headers.set('X-Cache-Hit', 'true') - CDN 如 Cloudflare 返回
x-cache: HIT，阿里云返回x-cdn-cache: HIT - 前端通过
performance.getEntriesByType('resource')获取条目后，需配合fetch()或Response.clone().headers（仅限同源或 CORS 允许）读取响应头
统计并计算缓存命中率
在页面加载完成后（如 window.addEventListener('load', ...)），遍历所有资源条目：
- 总请求数 =
performance.getEntriesByType('resource').length - 命中数 = 满足
entry.transferSize === 0 && entry.decodedBodySize > 0的条目数 - 命中率 =
(hitCount / totalCount * 100).toFixed(2) + '%' - 建议额外按资源类型（js/css/img）分组统计，便于定位哪类资源缓存策略失效
关联 Navigation Timing 验证真实性能收益
光看命中率不够，要验证它是否带来实际提速：
- 调用
performance.getEntriesByType('navigation')[0]获取首屏关键时序 - 对比
domContentLoadedEventEnd或loadEventEnd在缓存命中/未命中场景下的差异 - 重点关注 LCP 资源：若其
entry.name对应的条目transferSize === 0，再检查其renderTime是否显著提前（通常早 200–800ms）
