demo · v131

Compare source latencies across a real request mix

The companion single-route demo walks one source at a time. This one synthesises a mixed request log — fonts from cache, API from network, image from SW — and surfaces the per-source latency distribution you'd build out of PerformanceResourceTiming.workerRouterEvaluationStart and friends.

cache hits
avg ms
SW hits
avg ms
network hits
avg ms

request log

urlmatched sourcerouterEvalmatchedSource startresponseEnd

the api in use

const entries = performance.getEntriesByType("resource");
for (const e of entries) {
  console.log({
    url: e.name,
    source: e.matchedSourceType,                // "cache" | "network" | "fetch-event"
    routerEval: e.workerRouterEvaluationStart,  // when router was consulted
    matchedStart: e.workerMatchedSourceStart,   // when chosen source began
    total: e.responseEnd - e.startTime
  });
}

see also