Falando de Front-end: Entendendo o processo para renderizar uma página web

Vejo muitas vezes alguns desenvolvedores que não se preocupam com a estrutura de código HTML ou ignoram o fato de ter várias regras CSS sendo sobrescritas, simplesmente pelo fato de não terem conhecimento sobre alguns conceitos que veremos a seguir.

Entender os conceitos e processos que o browser utiliza para renderizar uma página é de fundamental importância quando estamos trabalhando em projetos onde cada passo em vão pode ser crucial para a performance e experiência do usuário.

DOM E CSSOM

O servidor entrega uma porção de código HTML que é analisado pelo browser e então é gerada uma árvore que chamamos de DOM. Além disso o browser também recebe as instruções CSS que são analisadas e então é gerada uma outra árvore chamada CSSOM.

Render Tree

Com os dois processos de análise concluídos e com o DOM e CSSOM definidos, o browser realiza a construção de uma render tree. A render tree é uma outra árvore internamente armazenada pelo browser e utilizada para representar os elementos visuais de uma determinada página. Os elementos dentro da tag são ignorados pela render tree, assim como elementos definidos com display: none. Entretanto, é válido lembrar que elementos com visibility: hidden continuam fazendo parte da árvore.

(Link para imagem original)

Uma vez que a render tree está completa, o browser pode executar o processo de reflow e paint.

Reflow

Reflow é o nome dado ao processo que o browser utiliza para definir o posicionamento dos elementos na tela.

O processo de reflow é executado pelo browser sempre que um elemento do DOM é manipulado, algum estilo de posicionamento ou geometria é alterado ou o browser é redimensionado e etc. Além do elemento em questão, o processo de reflow é executado para todos os seus ancestrais e filhos, visto que eles precisam levar em conta os novos estilos do pai. Os elementos seguintes ao elemento afetado também passarão por reflow, uma vez que eles podem ter sido atingidos de alguma forma. A seguir, temos o que chamamos de repaint.

Repaint

Também conhecido como redraw, repaint é o nome dado ao processo que o browser utiliza quando precisa atualizar algum estilo que não afeta o layout da página, ou seja, não atinge posicionamento ou tamanhos de elementos. Um exemplo seria a troca da cor de background de um elemento em questão.

Como minimizar reflows e repaints

Uma estratégia para reduzir os efeitos negativos que reflows e repaints causam para a experiência do usuário é reduzindo o número de requisições feitas para informações de estilos, evitar adicionar, remover, atualizar ou animar o DOM, redimensionar janelas, alterar o tamanho de fontes e fazer rolagens desnecessárias na página.

Conhecer esses processos facilitará sua vida quando precisar de argumentos para discutir sobre determinados conceitos que exijam muitos recursos do browser em projetos que prezam pela performance no Front-end. E espero que, antes de fazer aquela manipulação marota no DOM, você tenha certeza que não há outra saída e pense duas vezes se é realmente necessário.