从 4% 到 22%：GitHub Issues 如何用多级缓存与预测预取加速页面跳转

const API_BASE = '/api/issues';
const DB_NAME = 'issue-navigation-cache';
const STORE_NAME = 'responses';
const MAX_AGE_MS = 30_000;

const memory = new Map();

function openDatabase() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DB_NAME, 1);

    request.onupgradeneeded = () => {
      request.result.createObjectStore(STORE_NAME, { keyPath: 'key' });
    };
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function readPersistent(key) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readonly');
    const request = tx.objectStore(STORE_NAME).get(key);
    request.onsuccess = () => resolve(request.result ?? null);
    request.onerror = () => reject(request.error);
  });
}

async function writePersistent(entry) {
  const db = await openDatabase();
  return new Promise((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readwrite');
    tx.objectStore(STORE_NAME).put(entry);
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });
}

async function fetchAndCache(issueId, signal) {
  const key = String(issueId);
  const response = await fetch(`${API_BASE}/${encodeURIComponent(key)}`, {
    headers: { Accept: 'application/json' },
    signal
  });

  if (!response.ok) {
    throw new Error(`Issue request failed: ${response.status}`);
  }

  const entry = {
    key,
    data: await response.json(),
    storedAt: Date.now()
  };

  memory.set(key, entry);
  await writePersistent(entry);
  return entry.data;
}

export async function getIssue(issueId, { signal } = {}) {
  const key = String(issueId);
  const inMemory = memory.get(key);

  if (inMemory && Date.now() - inMemory.storedAt < MAX_AGE_MS) {
    return inMemory.data;
  }

  const persisted = await readPersistent(key);
  if (persisted) {
    memory.set(key, persisted);

    // 缓存先返回；后台更新失败不影响当前导航。
    fetchAndCache(key, signal).catch(() => {});
    return persisted.data;
  }

  return fetchAndCache(key, signal);
}

export function prefetchIssue(issueId) {
  const controller = new AbortController();
  getIssue(issueId, { signal: controller.signal }).catch(() => {});
  return () => controller.abort();
}

import { getIssue, prefetchIssue } from './issue-store.js';

const pendingPrefetches = new WeakMap();

document.querySelectorAll('[data-issue-id]').forEach((link) => {
  const start = () => {
    if (!pendingPrefetches.has(link)) {
      pendingPrefetches.set(link, prefetchIssue(link.dataset.issueId));
    }
  };

  const cancel = () => {
    pendingPrefetches.get(link)?.();
    pendingPrefetches.delete(link);
  };

  link.addEventListener('pointerenter', start, { once: true });
  link.addEventListener('focus', start, { once: true });
  link.addEventListener('pointerleave', cancel);

  link.addEventListener('click', async (event) => {
    event.preventDefault();
    const issue = await getIssue(link.dataset.issueId);
    history.pushState({}, '', link.href);
    renderIssue(issue); // 替换成项目中的渲染函数。
  });
});

const CACHE_NAME = 'issue-api-v1';

self.addEventListener('fetch', (event) => {
  const request = event.request;
  const url = new URL(request.url);

  if (request.method !== 'GET' || !url.pathname.startsWith('/api/issues/')) {
    return;
  }

  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);
    const cached = await cache.match(request);

    const update = fetch(request).then((response) => {
      if (response.ok) {
        cache.put(request, response.clone());
      }
      return response;
    });

    if (cached) {
      event.waitUntil(update.catch(() => {}));
      return cached;
    }

    return update;
  })());
});

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}