Como o navegador analisa HTML e constrói a página (caminho crítico de renderização)?

Question

Accepted Answer

O **caminho crítico de renderização** é a sequência de etapas que o navegador segue para transformar HTML, CSS e JS em pixels. Entender isso explica o que bloqueia a renderização e como fazer as páginas pintarem mais rápido. ## Os passos ```text 1. Parse HTML → DOM tree (the document structure) 2. Parse CSS → CSSOM tree (the style rules) 3. DOM + CSSOM → Render tree (visible nodes + their styles) 4. Layout (reflow) → compute each node's geometry (position/size) 5. Paint → fill in pixels (colors, text, images) 6. Composite → combine layers onto the screen ``` ## O que bloqueia a renderização **CSS é bloqueador de renderização.** O navegador não pintará até que o CSSOM esteja pronto (para evitar um flash de conteúdo não estilizado). Portanto, CSS grande/lento atrasa o primeiro paint — mantenha o CSS crítico pequeno e alinhe-o quando possível. **Scripts síncronos bloqueiam o parser.** Um ` ``` Pior ainda, um script síncrono que precisa do CSSOM (por exemplo, lê estilos calculados) espera pelo CSS também — então um arquivo CSS pode bloquear indiretamente um script, que bloqueia o parser. ## Como otimizá-lo - Coloque CSS em `` (carregue-o cedo); alinhe CSS crítico. - Adicione `defer` (ou `type="module"`) aos scripts, ou coloque-os antes de ``. - Minimize e comprima CSS/JS; remova regras não utilizadas. - Use `preload` para fontes/ativos críticos, `preconnect` para origens-chave. - Evite layout thrashing (leitura/escrita repetida de layout em JS) — força refluxos extras. ## Por que isso importa O caminho crítico de renderização determina métricas como First Contentful Paint e Largest Contentful Paint. Saber que CSS bloqueia a renderização e JS síncrono bloqueia a análise diz exatamente por que `defer`/`async`, CSS crítico alinhado e resource hints aceleram uma página — eles encurtam ou desbloqueiam este caminho.