Entendendo renderização no browser: DOM

Conhecer bem a ferramenta com a qual trabalhamos é um passo importante para evoluir em nossa carreira. Já imaginou um eletricista que não entenda como a corrente elétrica funciona? E já pensou em um desenvolvedor front-end que não compreenda como os navegadores funcionam? Pois é, isso é algo muito comum. Pouquíssimos desenvolvedores front-end entendem o processo que o navegador segue para montar uma página. E, apesar de ser um processo simples, ele é muito importante e, infelizmente, ignorado.

Hoje vamos começar uma jornada para entender o processo realizado pelos navegadores cada vez que criamos uma tag HTML, manipulamos algo com JavaScript ou mudamos uma cor com CSS.

O que é renderização?

Quando construímos uma casa, passamos por diversas etapas. Primeiro, fazemos a fundação, depois construímos as paredes, adicionamos o telhado, fazemos o acabamento (reboco, piso etc.) e, por fim, adicionamos os móveis e eletrodomésticos. A construção de um site segue um processo semelhante. Primeiro, criamos a fundação (HTML), depois adicionamos o acabamento (CSS) e, por fim, a interatividade (JavaScript). Em outras palavras, a renderização é o processo pelo qual o navegador transforma o código em algo visual e interativo para o usuário.

O processo de renderização

A renderização de uma página web é um processo complexo, por isso o navegador divide essa renderização em pequenas atividades, como construção do DOM e do CSSOM, paint, repaint, flow e reflow.

São muitos conceitos, porém hoje iremos focar nosso estudo no DOM.

DOM

O DOM (Document Objet Model) é uma representação em forma de estrutura de dados utilizada para representar hierarquicamente um documento html. A palavra hierarquicamente é importante, pois o DOM tem o visual de uma árvore, onde cada elemento é um nó que pode ter filhos que também podem ter filhos. Exatamente como na imagem abaixo:

e