如何利用 Performance API 分析资源缓存命中率

可通过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）