Princípios de DNS

DNS (Domain Name System) é o sistema que traduz nomes de domínio para endereços IP, permitindo que os navegadores localizem servidores web.

• DNS Raiz (.): Fornece endereços IP de servidores DNS de domínios de nível superior (TLD). É o ponto de entrada para a resolução de domínios.
• DNS de Domínio de Nível Superior (TLD): Responsável por fornecer andereços IP de servidores DNS de segundo nível para domínios específicos, como .com gerenciado pela Verisign. Registros de domínio são adquiridos através dessas entidades.
• DNS Autoritativo: Fornece o endereço IP final do host associado a um domínio de terceiro nível, mantido pelo proprietário do domínio ou serviços de hospedagem.

Processo de obtenção de IP a partir de um domínio:

1. Cache do Navegador: O navegador verifica seu cache local por endereços IP previamente resolvidos.
2. Arquivo Hosts do Sistema: Se não houver cache, o sistema operacional consulta o arquivo hosts.
3. Servidor DNS Local: O cliente DNS local, geralmente fornecido pelo ISP, é consultado.
4. Consulta Iterativa: Se nenhuma resolução anterior for bem-sucedida, o servidor DNS local inicia uma consulta iterativa:
   • Consulta ao servidor raiz para obter endereços de servidores TLD.
   • Consulta ao servidor TLD para obter endereços de servidores autoritativos.
   • Consulta ao servidor autoritativo para o IP final do host.
5. Armazenamento em Cache: O resultado é armazenado no cache do servidor DNS local e retornado ao cliente.

Handshake TCP e Encerramento de Conexão

O TCP usa um handshake de três etapas para estabelecer conexões confiáveis, evitando problemas como requisições de conexão obsoletas que poderiam desperdiçar recursos do servidor. Para encerrar, um handshake de quatro etapas é empregado:

1. Cliente indica o fim da transmissão de dados.
2. Servidor reconhece e verifica seus dados pendentes.
3. Servidor sinaliza o encerramento.
4. Cliente confirma o encerrramento da conexão.

Cache HTTP

O cache do navegador pode ser categorizado em dois modos:

• Cache Forte: Recursos são carregados diretamente do cache local sem solicitação ao servidor, resultando em status HTTP 200 (de cache de memória ou disco). Cabeçalhos relevantes incluem:
  • Cache-Control: Define mecanismos de cache com prioridade alta.
  • Expires: Especifica o tempo de expiração do cache (campo HTTP/1.0).
• Cache Negociado: O navegador solicita confirmação ao servidor sobre a atualidade do recurso. Se o servidor considerar a versão em cache válida, retorna status 304 (Não Modificado). Cabeçalhos incluem:
  • Last-Modified: Indica a última modificação do recurso (precisão de segundos).
  • ETag: Identificador exclusivo do recurso que substitui Last-Modified.

Renderização da Página pelo Navegador

O porcesso de renderização envolve:

1. Parseamento do HTML para construir a Árvore DOM.
2. Parseamento do CSS para gerar a Árvore CSSOM.
3. Execução de código JavaScript pelo motor JS.
4. Construção da Árvore de Renderização a partir das árvores DOM e CSSOM.
5. Criação da Árvore de Camadas de Renderização e contexto gráfico virtual (reflow).
6. Renderização da imagem final usando bibliotecas gráficas 2D/3D (repaint).

O download de CSS não bloqueia o parsing, mas JavaScript aguarda conclusão do download e execução antes de continuar. Recursos paralelos podem ser baixados simultaneamente.

Repaint e Reflow

Após a construção da árvore de renderização, o navegador inicia o desenho dos elementos. Mudanças no DOM, como adição ou remoção de elementos, alterações de posição, tamanho, conteúdo, ou redimensionamento da janela, acionam um reflow, onde as propriedades geométricas dos elementos são recalculadas e a árvore de renderização reconstruída. O repaint subsequente atualiza as mudanças visuais na tela.

Reflow atualiza atributos geométricos, enquanto repaint atualiza estilos. Reflow sempre implica em repaint, mas o contrário não é verdadeiro (ex.: alterar fundo de um elemento causa apenas repaint). Para otimizar:

• Aplicar mudanças de estilo em massa:

let elemento = document.querySelector('.minha-classe');
elemento.style.cssText = 'borda-esquerda: 1px; borda-direita: 2px; preenchimento: 5px';

• Ocultar elementos antes de modificá-los:

let lista = document.querySelector('#minha-lista');
lista.style.display = 'nenhum';
adicionarNos(lista, dados);
lista.style.display = 'bloco';

• Usar fragmentos de documento para construir sub-árvores:

let fragmento = document.createDocumentFragment();
adicionarNos(fragmento, dados);
lista.appendChild(fragmento);

• Copiar e substituir elementos:

let original = document.querySelector('#minha-lista');
let copia = original.cloneNode(true);
adicionarNos(copia, dados);
original.parentNode.replaceChild(copia, original);

• Cachear informações de layout:

let posicaoAtual = div.offsetLeft;
div.style.esquerda = 1 + ++posicaoAtual + 'px';
div.style.topo = 1 + ++posicaoAtual + 'px';