v146 · Web APIs · Cache Demo

Cache Demo

Uses the Cache API and the Resource Timing API to demonstrate the difference between a network fetch and a cache hit — how a previously-cached resource loads near-instantly on subsequent requests.

This demo uses the Cache Storage API to store and retrieve a small resource locally, then measures fetch timing using performance.getEntriesByType('resource'). The cross-site sharing itself is transparent — Chrome handles allowlisted resources automatically.

fetch simulation

Cache API—
Resource Timing—

First fetch (cold, network):

—

Second fetch (warm, cache):

—
cold fetch duration—
warm fetch duration—
speedup—

Click “Run demo” to start.

cross-site partition model

Run the same resource through two simulated top-level sites. Allowlisted resources reuse one shared bucket, while self-hosted lookalikes keep the top-level site in the cache key.

Choose a scenario to compare partitioned and shared cache behavior.

how transferSize reveals cache hits

// Resource Timing: transferSize === 0 means served from cache
performance.getEntriesByType('resource').forEach(entry => {
  const fromCache = entry.transferSize === 0;
  console.log(entry.name, fromCache ? 'CACHE HIT' : 'NETWORK');
});

// encodedBodySize > 0 but transferSize === 0 → disk or memory cache
// duration near 0ms → memory cache (sub-millisecond)
// duration small (1–5ms) → disk cache
// duration large (50–500ms) → network fetch

the allowlist model

// Chrome's shared cache allowlist criteria (approximate):
// 1. Resource must be served from a CDN with stable, long-lived URLs
// 2. Resource must be fetched billions of times daily across millions of origins
// 3. Cache-Control: public + immutable (or max-age ≥ 1 year)
// 4. Consistent bytes — same URL always returns the same content
// 5. No personalisation, no auth, no cookies

// Examples of candidate resources:
// - Common analytics scripts
// - Social media embed loaders
// - Video player embeds, captcha providers, and ads libraries

// Non-candidates remain partitioned:
// - Self-hosted copies
// - Manually version-pinned framework/library URLs

// Developer impact: zero. No API changes, no opt-in.
// Chrome handles keying automatically for allowlisted URLs.

see also