hum … O que é um nó?
Depois que as folhas de estilo forem carregadas no lado do cliente, o navegador começará a construir uma segunda árvore desses nós, mesmo se o <abbr title = “document object model”> DOM </abbr> não tiver sido completamente carregado. Esta árvore de renderização é a nossa representação visual do <abbr title = “document object model”> DOM </abbr> onde cada elemento é um nó. Esses nós são retângulos cuja estrutura e propriedades são definidas pelo “modelo de caixa”.
Onde um nó começa
Os nós de renderização são inicialmente criados sem propriedades geométricas em relação à posição e ao tamanho. Esses atributos são estabelecidos em um processo de layout subsequente que itera por toda a árvore de renderização e usa o modelo de fluxo visual CSS para posicionar e dimensionar cada nó visual. Quando o layout dos documentos está completo, o navegador finalmente desenha os nós para a tela com o “processo de pintura”
O que acontece com o nó?
Se eu fosse dizer … alterar um nó geometricamente dentro do DOM após o layout com Javascript, a parte relevante dos nós da árvore de renderização é invalidada, reconstruída, refluída e finalmente repintada.
Propriedades comobackground-color</code> or font-family</code> that don't change a node geometrically are therefore much faster to render.