Você insere o nome do site na barra de endereços do navegador, pressiona
enter e, por hábito, vê a página solicitada. É simples: digitei o nome do site - o site foi exibido. No entanto, para os mais curiosos, quero lhe contar o que acontece enquanto o navegador começa a receber partes do site (sim, o site vem em partes, em outras palavras, em pedaços) e exibe uma página totalmente desenhada.
Como o navegador funciona?
Antes da história de como o navegador desenha a página, é importante entender como ele está organizado, quais processos e em que nível são executados. Quando nos familiarizarmos com o processo de renderização, recordaremos os componentes do navegador mais de uma vez. Então, sob o capô, o navegador se parece com isso:
A interface do usuário é tudo o que o usuário vê: barra de endereços, botões de avançar / voltar, menus, favoritos - exceto na área em que o site é exibido.
O mecanismo do navegador é responsável pela interação entre a interface do usuário e o mecanismo de renderização. Por exemplo, clicar no botão voltar deve informar ao componente RE que é necessário desenhar o estado anterior.
O mecanismo de renderização é responsável por exibir a página da web. Dependendo do tipo de arquivo, esse componente pode analisar e renderizar HTML / XML e CSS, além de PDF.
A rede realiza solicitações de recursos xhr e, em geral, o navegador se comunica com o restante da Internet por esse componente, incluindo proxy, cache e assim por diante.
O JS Engine é o local em que o código js é analisado e executado.
O UI Backend é usado para desenhar componentes padrão, como caixas de seleção, entradas e botões.
A persistência de dados é responsável por armazenar dados locais, como cookies, SessionStorage, indexDB e assim por diante.
Em seguida, aprendemos como os componentes considerados do navegador interagem entre si e analisamos com mais detalhes o que está acontecendo dentro do Rendering Engine. Em outras palavras ...
Como o navegador converte html em pixels na tela?
Então, com a ajuda do componente Rede, o navegador começou a receber o arquivo html com pedaços, geralmente 8kb, o que vem a seguir? E então vem o processo de análise (
especificação de processo) e renderização desse arquivo no componente, como você deve ter adivinhado - o Rendering Engine.
Importante! Para aumentar a usabilidade, o navegador não espera até que todo o html seja carregado e analisado. Em vez disso, o navegador tenta exibir imediatamente a página para o usuário (a seguir, consideraremos como).
O próprio processo de análise é assim:
O resultado da análise é uma
árvore DOM . Tomemos, por exemplo, o seguinte html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Rendering</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <div class="header"> <h1>Hey</h1> </div> <div class="content"> <p> Lorem <span>ipsum</span>. </p> </div> <footer> Contact me </footer> </div> <script src="./code.js"></script> </body> </html>
A árvore DOM de um arquivo html será parecida com esta:
À medida que o navegador analisa o arquivo html, ele encontra tags contendo links para recursos de terceiros (
<link>, <script>, <img> e assim por diante) - à medida que são descobertos, ocorre uma solicitação para esses recursos.
Assim, enviando uma solicitação para o endereço prescrito no atributo href da tag
<link rel = "folha de estilo"> e tendo recebido o arquivo de estilos css, o navegador analisa esse arquivo e cria o chamado
CSS Object Model - CSSOM .
Imagine que temos uma folha de estilo:
body { font-size: 14px; } .wrapper { width: 960px; margin: 0 auto; } .wrapper .header h1 { font-size: 26px; } .wrapper p { color: red; } footer { padding: 20px 0; }
De onde obtemos este
CSSOM :
Atenção: aqui uma árvore é construída a partir dos estilos do nosso arquivo css. Além disso, também existem estilos do agente do usuário - estilos padrão do navegador e estilos embutidos - prescritos nas tags html.
Você pode ler mais sobre o algoritmo de análise de estilos css na
especificação .
Agora temos o
DOM e o
CSSOM - o primeiro responde a pergunta “o quê?”, O segundo responde a pergunta “como?”. Se você acha que o próximo passo é combinar o DOM e o CSSOM, então está absolutamente certo!
DOM + CSSOM = Render Tree.Render Tree é uma árvore de elementos visíveis (!) Criados na ordem em que devem ser renderizados na página. Observe que os elementos que possuem a regra css são exibidos: nenhum ou outros que afetam adversamente a exibição não estarão na
árvore de renderização .
O navegador cria a Árvore de Renderização para determinar exatamente o que precisa renderizar e em que ordem. A construção da árvore Render é mais ou menos assim: a partir do elemento raiz (html), o analisador passa por todos os elementos visíveis (pular link, script, meta, oculto pelos elementos css) e, para cada elemento visível, encontra a regra css correspondente no CSSOM.
No mecanismo do firefox, os elementos Render Tree são chamados de frames. Webkit usa o termo renderizador ou objeto de renderização. O objeto Render sabe como se colocar na página e também contém informações sobre seus filhos. E para os mais curiosos, se você olhar o código fonte do webkit, poderá encontrar uma classe chamada
RenderObject .
Continuando nosso exemplo, obtemos uma
árvore de renderização :
No momento, temos em algum estado uma Render Tree - uma árvore que contém informações sobre o que e como desenhar. Agora o navegador deve entender onde e com que tamanho o elemento será exibido. O processo de calcular a posição e o tamanho é chamado de
Layout .
O layout é um processo recursivo para determinar a posição e o tamanho dos elementos de uma árvore de renderização. Inicia a partir do objeto de renderização raiz, que é, e passa recursivamente parte ou toda a hierarquia da árvore, calculando as dimensões geométricas dos objetos de renderização filho. O elemento raiz tem uma posição (0,0) e seu tamanho é igual ao tamanho da parte visível da janela, ou seja, o tamanho da viewport.
O HTML usa um modelo de layout baseado em fluxo; em outras palavras, as dimensões geométricas dos elementos em alguns casos podem ser calculadas em uma passagem (se os elementos que aparecerem no fluxo posteriormente não afetarem a posição e o tamanho dos elementos já passados).
O layout pode ser global quando é necessário calcular a posição dos objetos de renderização de toda a árvore e incremental quando é necessário calcular apenas parte da árvore. O layout global ocorre, por exemplo, ao alterar o tamanho da fonte ou durante o evento de redimensionamento. O layout incremental ocorre apenas para objetos de renderização marcados como sujos.
Algumas palavras sobre o "sistema de bits sujos" . Este sistema é usado pelos navegadores para otimizar o processo, a fim de não recontar todo o layout. Ao adicionar um novo ou alterar um objeto de renderização existente, ele e seus filhos são marcados com o sinalizador "sujo". Se o objeto de renderização não for alterado, mas seus filhos tiverem sido alterados ou adicionados, esse objeto de renderização será marcado como "filhos sujos".
No final do processo de layout, cada objeto de renderização possui sua própria posição e tamanho.
Para resumir: o navegador sabe o que, como e onde desenhar. Portanto - resta apenas desenhar. Esse processo, curiosamente, é chamado de
Paint .
Paint - o estágio em que o pixel do monitor é preenchido com a cor especificada nas propriedades do objeto de renderização e a tela branca se transforma em uma imagem concebida pelo autor (desenvolvedor). Ao longo do caminho de renderização, esse é o processo mais caro (não que o anterior seja barato).
Além do processo de layout, a pintura pode ser global - a árvore é completamente redesenhada e incremental - a árvore é redesenhada parcialmente. Para redesenho parcial, um objeto de renderização marca seu retângulo como inválido. O sistema operacional considera essa área exigindo redesenho e gera o evento de pintura. Ao mesmo tempo, o navegador pode combinar áreas para realizar o redesenho de uma vez para todos os locais onde for necessário.
Dimensionar e posicionar elementos da árvore (layout) e redesenhar (pintar) são processos caros. Eles são executados no nível da CPU. Ao desenvolver aplicativos da Web dinâmicos nos quais esses processos serão iniciados com muita frequência, nunca conseguiremos animações suaves.
Portanto, deve haver algo que ajude a criar sites com animação rica, sem carregar a CPU e desenhar cada quadro em menos de 16,6 ms (60 fps). De fato, o navegador executa outra etapa que ajuda a otimizar a dinâmica dos sites -
Composite (composição).
Antes da composição, todos os elementos desenhados estão em uma camada (camada de memória). Ou seja, alterar os parâmetros (por exemplo, dimensões ou posições geométricas) de alguns elementos implicará o recálculo dos parâmetros dos elementos vizinhos. Mas se você distribuir elementos em camadas compostas - alterar os parâmetros de um elemento causará o recálculo apenas em uma camada específica, sem afetar os elementos em outras camadas. Portanto, esse processo é o mais barato em termos de desempenho, portanto, você deve tentar fazer alterações que causem apenas composição.
Resumindo o acima, obtemos o seguinte processo de renderização de uma página da web:
TLDRO navegador recebe o arquivo html, o analisa e cria o DOM. Conhecendo os estilos css, o navegador os carrega, os analisa, cria o CSSOM e os combina com o DOM, obtemos a Render Tree. Resta descobrir onde organizar os elementos da Árvore de Renderização - essa é a tarefa do layout. Depois de organizar os elementos, você pode começar a desenhá-los - esta é a tarefa de pintura, o estágio em que os pixels da tela são preenchidos.
Dynamics
O que acontece quando a propriedade css é alterada? Ou, por exemplo, um novo nó dom foi adicionado? No caso de alterar as propriedades css, tudo depende da propriedade que está sendo alterada. Existem apenas duas propriedades que acionam a tarefa
composta -
opacidade e
transformação . Somente essas duas propriedades são as mais baratas para animação. Por exemplo, alterar o plano de fundo causará a tarefa de pintura (depois composta) e alterar a exibição causará primeiro o layout, depois a pintura e a composição. Uma lista de tarefas causadas por alterações de estilo pode ser encontrada em
csstriggers.com .
Ao adicionar um novo nó à árvore dom - obviamente o navegador precisa adicionar um novo objeto à árvore, calcular sua posição na página, calcular as posições de outros elementos na página (se eles foram afetados por um novo elemento) e, no final, desenhar tudo isso parece caro. Portanto, ao executar essas operações, você deve ter em mente o desempenho, porque nem todo usuário da Internet inicia seu aplicativo Web no modelo de dispositivo mais recente.
Para resumir, examinamos em quais componentes o navegador consiste, como eles interagem entre si e como o Rendering Engine desenha a página para o usuário.
Você pode ver o exposto acima nas ferramentas do chrome, mas para não ir além do título do artigo, é tudo por enquanto.