Lá vem Diêgo com mais um artigo que normalmente os desenvolvedores não leem!
Calma pequeno(a) aprendiz, vamos ver o que diz Paul Irish, um dos colaboradores da equipe de desenvolvimento do Google Chrome:

Como desenvolvedor Web, aprender o funcionamento interno do navegador ajuda você a tomar melhores decisões e conhecer as razões por trás, das práticas recomendadas.

Embora seja um documento bastante longo, recomendamos que você gaste algum tempo pesquisando; nós garantimos que você ficará feliz por ter feito isso.
Então deixa de preguiça, pegue um copo com água, suco ou café e vamos ler!

Não vai rolar a página, achando que entendeu o artigo. 🤓

A principal funcionalidade

Os navegadores são os softwares mais utilizados no sistema operacional. Por isso, explicarei como eles funcionam por baixo dos panos.

A principal função do navegador é apresentar um recurso Web. O recurso geralmente é um documento HTML, mas também pode ser um PDF, imagem, vídeo ou algum outro tipo de conteúdo. A localização do recurso é especificada pelo usuário usando uma URI (Uniform Resource Identifier).

A maneira como o navegador interpreta e exibe arquivos HTML é especificada nos arquivos HTML e CSS. Essas especificações são mantidas pela W3C (World Wide Web Consortium). Durante anos, os navegadores cumpriram apenas uma parte das especificações e desenvolveram suas próprias extensões. Isso ocasionou sérios problemas de compatibilidade. Hoje, a maioria dos navegadores está mais ou menos em conformidade com as especificações.

Arquitetura do Navegador

Os principais componentes envolvidos na construção de um navegador são:

1. Interface do usuário: Inclui barra de endereço, botão voltar/avançar, menu de favoritos, etc. Tudo que é exibido no navegador, exceto a janela onde você vê a página solicitada.
2. Mecanismo do navegador: organiza ações entre a interface do usuário e o mecanismo de renderização.
3. Mecanismo de renderização: responsável por exibir o conteúdo. Por exemplo, se o conteúdo solicitado for HTML, o mecanismo de renderização analisará HTML e CSS e exibirá o conteúdo analisado na tela.
4. Rede: para chamadas de rede, como solicitações HTTP, usando diferentes implementações para diferentes plataformas por trás de uma interface independente de plataforma.
5. Interpretado Javascript: Analisa e executa código JavaScript.
6. UI Backend: Este componente usa os métodos de interface do sistema operacional.
7. Persistência de Dados: Esta é uma camada de persistência. O navegador pode precisar salvar todos os tipos de dados localmente, como cookies. Os navegadores também oferecem suporte a mecanismos de armazenamento, como localStorage, IndexedDB, WebSQL e FileSystem.

Agora que conhecemos os principais componentes envolvidos na construção de um navegador da Web, podemos passar para o próximo post.