Chapter 56: Resource Hints & Preloading

Measuring Resource Timing & Network Waterfalls

**Part 12: Performance & Optimization** — Chapter 56: Resource Hints & Preloading

LEARNING OBJECTIVES ⌵
  • Analyze resource network lifecycles via the PerformanceResourceTiming API.
  • Calculate DNS lookup, TCP handshake, TLS negotiation, TTFB, and download duration programmatically.
  • Use Timing-Allow-Origin HTTP response headers to access cross-origin timing metrics.
  • Build automated network telemetry loggers to catch slow assets in production.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

💻 Interactive Code Playground

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'resource') {
      const dns = entry.domainLookupEnd - entry.domainLookupStart;
      const tcp = entry.connectEnd - entry.connectStart;
      const ttfb = entry.responseStart - entry.requestStart;
      const download = entry.responseEnd - entry.responseStart;
      const totalDuration = entry.duration;

      console.log(`[Resource: ${entry.name.split('/').pop()}]`, {
        initiator: entry.initiatorType,
        dnsMs: Math.round(dns),
        tcpMs: Math.round(tcp),
        ttfbMs: Math.round(ttfb),
        downloadMs: Math.round(download),
        totalMs: Math.round(totalDuration)
      });
    }
  }
});

observer.observe({ type: 'resource', buffered: true });

📌 Key Takeaways

  • Use PerformanceObserver with buffered: true to inspect all asset loading metrics.
  • Third-party CDN servers must include Timing-Allow-Origin: * to expose detailed DNS/TCP metrics to the client.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?