DEV Community

Cover image for Navegadores, como funcionam?
Diego Dmitry
Diego Dmitry

Posted on

Navegadores, como funcionam?

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:

Image description

  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.

Top comments (0)