Existem muitas coisas do nosso dia a dia que não pensamos sobre o funcionamento, quando iniciamos nossa carreira de tecnologia, às vezes, não temos tempo ou curiosidade, ou caminhos neuronais para entender algumas coisas por debaixo dos panos. Aprender o funcionamento dos navegadores foi assim para mim. O intuito desse post é trazer de maneira simples esse funcionamento e se tiver curiosidade, aconselho fortemente ler os links que eu indico ao final do post.
Quando pedimos algo ao servidor com o enter na URL, passamos por todos os processos apresentados nos últimos posts, e ao chegar essa resposta, começa o processo de renderização, cada tipo de código passa por analisadores diferentes, verificando sintaxe e as instruções daquele trecho do código, é criada uma árvore (algumas, na verdade) com esses atributos que são chamados nós e eles têm o papel de identificar o lugar, cor e características de cada componente. Caso os analisadores encontrem alguma inconsistência eles consideram o documento como inválido e dependendo da gravidade, não renderizam o componente ou até o site na tela.
O HTML por não ser uma gramática livre de contexto, não pode ser analisado facilmente, então durante a construção da árvore DOM ela é modificada algumas vezes durante o processo e existem algumas tolerâncias de sintaxe inválida.
Para mudanças dinâmicas, os navegadores tentam executar o mínimo de ações, usando a árvore, porém algumas modificações podem precisar de um recalculo de tudo, novo layout e nova pintura de toda a árvore, um exemplo disso seria a mudança de tamanho da fonte.
Além disso, cada navegador tem um motor de renderização diferente com especificidades e alguns consideram estilos pré-estilizados do usuário, fazendo com que desenvolvedores front-end não tenham um minuto de paz. risos.
Os navegadores evoluiriam muito, assim como as ferramentas para a criação de conteúdo dos mesmo, além dos sites cada vez mais dinâmicos, algumas das aplicações desktop que você utiliza no seu dia a dia, também utilizam motores dos navegadores, como Spotify, Discord e muitas outras.
Se você ficou interessado sobre navegadores:
- Como os navegadores funcionam: bastidores dos navegadores modernos
- Como os motores de navegadores modernos funcionam?
- Como os navegadores processam os códigos de uma página web?
Se você gostou do post, comenta algo que você sempre quis saber como funciona embaixo dos panos!
Top comments (0)