快取策略：HTTP Cache、bfcache 與 Speculation Rules

const entries = performance.getEntriesByType('resource');
const stats = { fresh: 0, revalidated: 0, network: 0, sw: 0 };

for (const e of entries) {
  if (e.workerStart > 0) stats.sw++;
  else if (e.transferSize === 0 && e.decodedBodySize > 0) stats.fresh++;
  else if (e.transferSize > 0 && e.transferSize < 600 && e.encodedBodySize > e.transferSize) stats.revalidated++;
  else stats.network++;
}
console.table(stats);
// 想看哪些檔沒命中：
console.table(
  entries.filter(e => e.transferSize > 600)
         .map(e => ({ name: e.name.split('/').pop(), kB: (e.transferSize / 1024).toFixed(1) }))
);

// 1. 不要用 unload；離開時用 pagehide 收尾
window.addEventListener('pagehide', (event) => {
  if (event.persisted) {
    // 正在進入 bfcache：關閉會阻擋資格的連線
    socket?.close();
  }
  // 送出分析資料（sendBeacon 不會阻擋 bfcache）
  navigator.sendBeacon('/analytics', JSON.stringify(collect()));
});

// 2. 被還原時，更新可能過時的資料
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    console.log('從 bfcache 還原');
    refreshCartBadge();   // 使用者可能在另一頁改了購物車
    socket = connect();   // 重新建立連線
  }
});

// 3. 回報「為什麼沒有被還原」
const nav = performance.getEntriesByType('navigation')[0];
if (nav.type === 'back_forward' && nav.notRestoredReasons) {
  const reasons = nav.notRestoredReasons.reasons?.map(r => r.reason);
  navigator.sendBeacon('/analytics', JSON.stringify({ bfcacheBlocked: reasons }));
}

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/products/*" },
        { "not": { "selector_matches": ".no-prerender" } }
      ]
    },
    "eagerness": "moderate"
  }],
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "conservative"
  }]
}
</script>

function onActivated(fn) {
  if (document.prerendering) {
    document.addEventListener('prerenderingchange', fn, { once: true });
  } else {
    fn();
  }
}

onActivated(() => {
  sendPageView();          // 只在使用者真的看到頁面時計一次
  startVideoAutoplay();
});

// 量測時要扣掉 activationStart，否則 LCP 會出現「負數」或極小值
const nav = performance.getEntriesByType('navigation')[0];
const activationStart = nav.activationStart || 0;
new PerformanceObserver((list) => {
  const last = list.getEntries().at(-1);
  console.log('LCP（相對於啟用）', Math.max(last.startTime - activationStart, 0));
}).observe({ type: 'largest-contentful-paint', buffered: true });