ricco.dev.br

Navegadores Web

O Navegador Web é sem sombra de dúvidas o sotfware mais antigo e uasdo para os acesso a web. O avanço dos navegadores da atráves da dos anos fez com que eles se focassem em aumentar sua usabilidade e onipresença na vida das pessoas. O navegador da web é um aplicativo que fornece acesso ao servidor da web, envia uma solicitação de rede para URL, obtém recursos e os representa interativamente.

Estrutura do navegador da web

Interface do Usuário

É um espaço onde a interação entre o usuário e o navegador (aplicação) ocorre por meio do controle apresentado no navegador. Nenhum padrão específico é imposto sobre a aparência e o comportamento dos navegadores da web. A especificação HTML5 não define os elementos da IU, mas lista alguns elementos comuns: barra de localização, barra pessoal, barras de rolagem, barra de status e barra de ferramentas.

Motor do Navegador

Ele fornece uma interface de alto nível entre a IU e o mecanismo de renderização. Ele faz uma consulta e manipula o mecanismo de renderização com base na interação do usuário. Ele fornece um método para iniciar o carregamento da URL, cuida da ação de recarregar, voltar e avançar de navegação.

Motor de Renderização

O Motor de Renderização é responsável por exibir o conteúdo da página da web na tela. A principal operação de um mecanismo de renderização é analisar HTML. Por padrão, ele exibe HTML, XML e imagens e oferece suporte a outros tipos de dados por meio de plug-in ou extensão.

Motor de renderização dos navegadores mais populares:

Critical Rendering Path

Para criar os pixels na tela (fazer sua primeira renderização), o navegador após receber os dados (HTML, CSS, JavaScript) da rede deve passar por uma série de processos / técnicas denominados Critical Rendering Path. Isso inclui DOM, CSSOM, Render Tree, Layout e Painting.

Dados do DOM

O conteúdo solicitado da camada de rede é recebido no mecanismo de renderização (blocos de 8 kb geralmente) no formato de fluxo binário. Os bytes brutos são então convertidos em um caractere (com base na codificação de caracteres) do arquivo HTML.

Os caracteres são então convertidos em tokens. O Lexer realiza análise lexical, dividindo a entrada em tokens. Durante a tokenização, todas as tags de início e término no arquivo são consideradas. Ele sabe como eliminar caracteres irrelevantes, como espaços em branco e quebras de linha. O analisador então realiza a análise de sintaxe, aplicando a regra de sintaxe da linguagem para construir uma árvore de análise por meio da análise da estrutura do documento.

O processo de análise é iterativo. Ele pedirá ao lexer um novo token e o token será adicionado à árvore de análise se a regra de sintaxe do idioma corresponder. O analisador solicitará outro token. Se nenhuma regra corresponder, o analisador armazenará o token internamente e continuará solicitando tokens até que a regra correspondente a todos os tokens armazenados internamente seja encontrada. Se nenhuma regra for encontrada, o analisador emitirá a exceção. Isso significa que o documento não era válido e continha erros de sintaxe.

Esses nós são vinculados na estrutura de dados em árvore chamada DOM (Document Object Model) que estabelece o relacionamento pai-filho e relacionamentos entre elementos adjacentes.

CSS Data to CSSOM

Bytes brutos de dados CSS são convertidos em caracteres, tokens, nós e finalmente em CSSOM (CSS Object Model). CSS é baseado em uma cascata, que determina quais estilos são aplicados ao elemento. Os dados de estilo para o elemento podem vir dos pais (via herança) ou são configurados para os próprios elementos. O navegador deve percorrer recursivamente a estrutura de árvore CSS e determinar o estilo do elemento específico.

DOM, CSSOM e Arvore DOM

A árvore DOM contém as informações sobre o relacionamento dos elementos HTML e a árvore CSSOM contém informações sobre como esses elementos são estilizados. A partir do nó raiz, o navegador percorre cada um dos nós visíveis. Alguns nós estão ocultos (controlados por CSS) e não são refletidos na saída renderizada. Para cada nó visível, o navegador corresponde à regra apropriada definida no CSSOM e, finalmente, esses nós são emitidos com seu conteúdo e estilo chamado Render tree (Layout Tree).

Layout

Em seguida, prossegue para o próximo nível denominado layout. O tamanho e a posição exatos de cada conteúdo devem ser calculados para renderizar em uma página (janela de visualização do navegador). O processo também é conhecido como reflow. O HTML usa um modelo de layout baseado em fluxo, o que significa que a geometria é calculada em uma única passagem na maioria das vezes. É um processo recursivo que começa no elemento raiz do documento.

Painting

Cada um dos renderizadores é executado e o método paint é chamado para exibir o conteúdo na tela. O processo de pintura pode ser global (pintar a árvore inteira) ou incremental (a árvore de renderização valida seu elemento na tela) e o sistema operacional gera o evento de pintura nesses nós específicos e a árvore inteira não é afetada. A pintura é um processo gradual em que algumas partes são analisadas e renderizadas enquanto o processo continua a ser executado.

Interpretador JavaScript (Motor JS)

JavaScript é uma linguagem de script que permite atualizar dinamicamente o conteúdo da web, controlar elementos multimídia e animar imagens animadas, executando esse código atráves do mecanismo JS do navegador. DOM e CSSOM fornecem uma interface para que o JS possa alterar ambos. Como o navegador não tem certeza do que um determinado JS fará, ele pausará imediatamente a construção da árvore DOM depois de encontrar a tag de script. Cada script é um bloqueador dessa análise; a construção da árvore DOM será interrompida para executar esse código.

O motor JS começa a analisar o código imediatamente após buscá-lo no servidor que alimenta o analisador JS. Ele os converte no objeto representativo que a máquina entende. O objeto que armazena todas as informações do analisador na representação em árvore da estrutura sintática abstrata é chamado de árvore de sintaxe de objeto (AST). Os objetos são alimentados em um interpretador que os traduz em código de bytes.

Estes são compiladores Just In Time (JIT s), o que significa que os arquivos JavaScript baixados do servidor são compilados em tempo real no computador do cliente. O interpretador e o compilador são combinados. O interpretador executa o código-fonte quase imediatamente; o compilador gera código de máquina que o sistema cliente executa diretamente.

Navegadores diferentes usam motores JS diferentes

UI Back End

Ele é usado para desenhar um widget básico, como caixas de combinação e janelas. Embaixo, ele usa métodos de interface de usuário do sistema operacional. Ele expõe uma plataforma genérica que não é específica do sistema host.

Data Storage

Esta camada é persistente, o que ajuda o navegador a armazenar dados (como cookies, armazenamento de sessão, DB indexado, Web SQL, favoritos, preferências, etc). A nova especificação HTML5 descreve um banco de dados que é um banco de dados completo em um navegador da web.

Rede

Ele lida com todos os tipos de comunicação de rede dentro do navegador. Ele usa um conjunto de protocolos de comunicação como HTTP, HTTPs, FTP enquanto busca os dados de URLs solicitadas.

O navegador da Web depende do DNS para resolver as URLs. Os registros são armazenados em cache no navegador, sistema operacional, roteador ou Provedor de Acesso a Internet. Se a URL solicitada não estiver armazenada em cache, o servidor DNS do provedor iniciará a consulta para encontrar o IP desse servidor. Depois de receber o endereço IP correto, o navegador estabelece a conexão com o servidor por meio de protocolos. O navegador envia o pacote SYN (sincronizar) ao servidor perguntando se ele está aberto para conexão TCP. O servidor responde com ACK (confirmação) do pacote SYN usando o pacote SYN / ACK.

O navegador recebe um pacote SYN / ACK do servidor e reconhecerá enviando um pacote ACK. Então a conexão TCP é estabelecida para comunicação de dados. Assim que a conexão for estabelecida, a transferência de dados estará pronta. Para transferir os dados, a conexão deve atender aos requisitos do protocolo HTTP, incluindo regras de conexão, mensagens, solicitação e resposta.

Render Blocking e Parser Blocking Resources

Sempre que o navegador encontra um elemento para carregar CSS externo, uma solicitação é enviada pela rede para buscar o arquivo .css de forma assíncrona. Ele será movido imediatamente (sem esperar que os dados CSS sejam baixados) para analisar os elementos abaixo dele e o processo de construção do DOM não é interrompido. No entanto, mesmo após a construção da árvore DOM sem que o CSSOM esteja pronto, o navegador não renderiza nada na tela. Para renderizar, DOM e CSSOM devem ser construídos. Portanto, HTML e CSS são ambos recursos de bloqueio de renderização. Renderizar conteúdo sem CSS totalmente carregado causa Flash Of Unstyled Content (FOUC).

No entanto, esse não é o caso do Javascript. Sempre que o navegador encontra uma tag de script, o processo de construção do DOM é imediatamente interrompido até que o arquivo Js seja baixado e executado. Isso ocorre porque o JavaScript tem a capacidade de alterar a análise da marcação subsequente (DOM, CSSOM). Isso torna o Javascript um bloqueador de recursos do analisador.

Defer e Async nos Scripts

Ambos os atributos defer e async ajudam o desenvolvedor a especificar o modo assíncrono de execução de Javascript.

Por que o mesmo site renderiza diferente em cada navegador?

Muitos fatores influenciam essa discrepância das mesmas páginas da web em diferentes navegadores. Como navegadores diferentes têm mecanismos de navegador diferentes (Render Engine e Javascript Engine) que interpretam o código-fonte (HTML e CSS) de maneiras ligeiramente diferentes causando esta inconsistência.

Outras razões para a disparidade incluem configurações do computador (resolução de tela, equilíbrio de cores, diferenças no nível do sistema operacional, fontes), bugs no mecanismo e na página da web.

Comparação de navegadores

Existem muitos navegadores diferentes no mercado hoje. Embora o aplicativo principal do navegador seja o mesmo, eles diferem entre si em mais de um aspecto. As áreas de distinção são plataforma (Linux, Windows, Mac, BSD e outros Unix), protocolos, interface gráfica do usuário (Real, Headless), HTML5, aberto -source, e proprietário, explicado em detalhes ** aqui **.

Referencias

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://grosskurth.ca/papers/browser-archevol-20060619.pdf

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

https://dev.w3.org/html5/spec-LC/

https://developer.mozilla.org/

Comments powered by Talkyard.