Rendering Pipeline

Galho 3 da trilha Plataforma Web. Cobre como o browser transforma HTML + CSS em pixels: parse, render tree, layout, paint, compositing, e como otimizar cada etapa.

Fase Iniciado

• 01 — Parse e construção do DOM e CSSOM — parsing incremental, CSS render-blocking, async/defer
• 02 — Render tree, layout e paint — DOM+CSSOM → render tree, o que aciona reflow vs repaint
• 03 — Compositing e GPU layers — GPU layers, will-change, transform/opacity, layer explosion

Fase Adepto

• 04 — Reflow e repaint — layout thrashing, forced synchronous layout, batch reads/writes
• 05 — Critical Rendering Path otimizado — CSS crítico inline, async CSS, preload/preconnect, Web Vitals

Fase Magus

• 06 — requestAnimationFrame — delta time, FLIP animations, game loop, requestIdleCallback
• 07 — Rendering em entrevista — URL ao pixel, reflow vs repaint, LCP/CLS/INP, armadilhas, capstone

Próximo galho

G4 — Web APIs — Intersection Observer, MutationObserver, History API, Clipboard