Como um navegador funciona
Da URL até os pixels na tela: DOM, CSSOM, render pipeline, event loop, segurança e performance.
O que você vai aprender
Toda vez que você abre uma página, o navegador executa uma sequência precisa de etapas: parseia o HTML em uma árvore DOM, processa o CSS em um CSSOM, combina os dois em uma Render Tree, calcula posições (Layout), preenche pixels (Paint) e envia à GPU (Composite).
Paralelamente, o event loop do JavaScript orquestra callbacks,
Promises e timers num único thread. Entender isso explica por que seu código async
funciona como funciona — e por que animações travam quando você não usa transform.
O DOM — a árvore do documento
Como o HTML vira uma árvore de objetos manipulável por JavaScript.
Disponível 02CSSOM e o modelo de caixa
Como o CSS é processado e o modelo de caixa define posição e tamanho.
Disponível 03O pipeline de renderização
De DOM+CSSOM até os pixels: Layout, Paint e Composite.
Disponível 04O event loop do JavaScript
Por que setTimeout 0 não é imediato e como Promises têm prioridade.
Disponível 05Segurança: SOP e CORS
A Política de Mesma Origem e como o CORS permite comunicação segura.
Disponível 06Performance: reflow e composite
Por que algumas animações travam e como usar a GPU do browser.
DisponívelProjetos desta trilha
DOM Inspector
Construa um inspector de DOM em JavaScript puro: liste todos os nodos, mostre atributos, permita navegar pela árvore. Use document.querySelectorAll e recursão.
Event Loop Profiler
Use performance.now() para medir o tempo real de execução de callbacks. Demonstre visualmente que microtasks (Promises) executam antes de macrotasks (setTimeout).
Performance Audit
Abra o DevTools Performance tab e grave um perfil de uma página. Identifique os maiores blocos de Layout, Paint e Script. Proponha e implemente uma otimização.