Interação Navegador-Página: Renderização Baseada em Padrões
"Deferência" aqui significa como navegadores interpretam e executam o código que uma página web fornece, seguindo padrões abertos para que páginas exibam consistentemente.
Mecanismos Principais
- Parsing HTML → Árvore DOM: Navegador tokeniza HTML, constrói Document Object Model. Scripts podem modificar DOM dinamicamente.
- Parsing CSS → CSSOM: Stylesheets parseadas em CSS Object Model. Combinado com DOM → Render Tree (nós visíveis + estilos).
- Layout (Reflow): Calcula geometria (posição, tamanho) para cada objeto de render.
- Paint: Desenha texto, cores, imagens, bordas, sombras em layers.
- Composite: GPU combina layers, aplica transforms/opacidade, envia à tela.
Padrões-Chave Que Navegadores Seguem
- HTML Living Standard (WHATWG) — elementos, parsing, APIs.
- CSS Specs (W3C) — seletores, flex/grid, custom properties, containment.
- ECMAScript (TC39) — linguagem JavaScript.
- Web APIs: Fetch, WebSockets, WebRTC, Canvas, WebGL, WebAssembly, Service Workers, IndexedDB, etc.
- HTTP/1.1, HTTP/2, HTTP/3 (QUIC) — transporte.
Por Que Deferência Importa
- Interoperabilidade: Mesma página funciona no Chrome, Firefox, Safari, Edge.
- Progressive Enhancement: Conteúdo core funciona sem JS/CSS; melhorias vêm por cima.
- Acessibilidade: HTML semântico + ARIA → leitores de tela, controle por voz.
- Performance: Padrões permitem caching, prefetch, streaming, priorização.
Quando Navegadores Diferem
- Features não padronizadas (prefixes, origin trials).
- Bugs / implementações incompletas.
- Configurações do usuário (fontes, zoom, dark mode, reduced motion).
- Diferenças de engine (Blink, WebKit, Gecko).
Desenvolvedores testam cross-browser; usam feature detection, polyfills, fallbacks.
