From bytes to pixels — parse, style, layout, paint, composite — and how your JS/CSS kicks each stage.

intermediate

Why the browser blocks cross-origin responses, what Access-Control-* headers mean, preflight, credentials, and how to fix real frontend errors.

intermediate

End-to-end navigation: resolve URL, fetch HTML, discover resources, parse, and get first pixels — without magic.

beginner

What blocks first paint and LCP on initial load — HTML, CSS, fonts, and scripts — and how to shorten the path without rehashing the full pipeline.

intermediate

How HTML and CSS become DOM and CSSOM, how the render tree filters display:none, and what blocks construction.

intermediate

Layout (reflow) vs paint (repaint): which CSS/DOM changes trigger which, and how to keep animations cheap.

intermediate

When browsers promote layers, why transform/opacity animate cheaply, and layer explosion costs.

advanced

What runs on the main thread vs compositor, why scroll can be smooth while clicks feel dead, and fix strategies.

advanced

DNS, TCP/TLS, HTTP/1.1 vs H2/H3, connection reuse, and what frontend code can actually influence.

intermediate

Cache-Control, ETag, Last-Modified, Vary, and immutable fingerprinting patterns for static vs HTML.

intermediate

SW lifecycle install/activate/fetch, scope, update story, and what belongs in a service worker vs the page.

advanced

Precache and runtime cache with the Cache API: match, put, strategies, and how it differs from HTTP cache.

advanced

When browsers send CORS OPTIONS preflights, which headers to return, caching Max-Age, and SPA debug tips.

intermediate

Why Content-Type matters, how MIME sniffing works, X-Content-Type-Options: nosniff, and XSS-ish pitfalls.

intermediate

Origin tuple (scheme/host/port), what SOP blocks, and how CORS, postMessage, and cookies relate.

intermediate

Cookies, localStorage, sessionStorage, IndexedDB, Cache Storage — capacity, persistence, and when each is the wrong tool.

beginner

How the back/forward cache freezes pages for instant history nav, what blocks it, and how to restore state safely.

advanced

active, passive, hidden, frozen, discarded — Page Lifecycle states and the events you should actually use.

intermediate

visibilitychange, pagehide, and pageshow: flush analytics, pause media, and survive mobile backgrounding.

intermediate

PerformanceNavigationTiming phases from startTime to loadEventEnd for document load diagnostics.

advanced

PerformanceResourceTiming for every subresource: durations, transferSize, initiatorType, and RUM waterfalls.

advanced

Subscribe to performance entries safely: entry types, buffered flag, observe patterns, and RUM use.

advanced

Detect main-thread tasks over 50ms with PerformanceObserver longtask entries and fix INP-killing work.

advanced

LayoutShift entries, value calculation, hadRecentInput, and how to attribute CLS in the field.

advanced

Event Timing API fields that power INP: input delay, processing, presentation delay, and attribution.

advanced

Read waterfalls, timing phases, headers, throttling, and initiator chains in the Network panel like a production debugger.

beginner

Record main-thread timelines: long tasks, style/layout/paint, frames, and how to turn flame charts into INP fixes.

intermediate

Heap snapshots, allocation timelines, detached DOM nodes, and practical leak hunts in SPAs.

advanced

DevTools CPU and network throttling: when lab numbers lie, custom profiles, and reproducing field pain.

beginner

Replace UA string parsing with Client Hints: Sec-CH-UA headers, critical hints, and privacy-aware adaptation.

advanced

Lock down camera, geolocation, payment, and other powerful features with Permissions-Policy headers and iframe allow.

advanced

Feature-Policy renamed to Permissions-Policy: migration notes, old header syntax, and what still matters.

advanced

COOP same-origin and same-origin-allow-popups: sever window.opener, process isolation, and OAuth popups.

advanced

COEP require-corp / credentialless: cross-origin isolation, SharedArrayBuffer, and embedding requirements.

advanced

Trusted Types lock dangerous DOM sinks to typed values — policy design, CSP require-trusted-types-for, and DOM XSS.

advanced

How content scripts, background/service workers, and pages talk: runtime messaging, ports, and security boundaries.

advanced