v145 · Performance · Resource Timing · demo
Cache vs Network
Uses Resource Timing's transferSize, connectStart, and duration to classify each fetch as memory cache, disk cache, or network. Repeated fetches of the same resource produce a bimodal distribution — fast cached vs. slow network — and the dot chart makes the two populations visible that a naive average would hide.
Chrome 145+ — extended Resource Timing phase fields.
transferSize === 0 && encodedBodySize > 0 signals a cache hit; connectStart === 0 && duration < 5 distinguishes memory from disk cache.
Click "Fetch (single)" or "Fetch ×10" · first fetch is a network hit · subsequent fetches come from cache · see the two populations form
Fetch population — duration (ms)
Memory cache (<2ms)
Disk cache (2–20ms)
Network (>20ms)
0ms
—
Memory cache
Count0
Median—
Disk cache
Count0
Median—
Network
Count0
Median—
Resource timing log
———Fetch something to see Resource Timing data
// Classify Resource Timing entries: memory cache vs disk cache vs network
// Chrome 145 adds extended timing resolution for bimodal detection.
const entries = performance.getEntriesByType('resource');
function classify(e) {
const isCacheHit = e.transferSize === 0 && e.encodedBodySize > 0;
if (!isCacheHit) return 'network'; // full fetch — transferSize > 0
if (e.duration < 2) return 'memory'; // memory cache — near-0ms
return 'disk'; // disk cache — few ms, no connect
}
const fast = [], slow = [];
entries.forEach(e => {
const type = classify(e);
if (type === 'network') slow.push(e.duration);
else fast.push(e.duration);
});
// Bimodal: fast cluster (cache) vs slow cluster (network)
// DON'T average them together — report separate p50s:
console.log('Cached p50:', percentile(fast, 0.5));
console.log('Network p50:', percentile(slow, 0.5));