Aqui você vai encontrar como as partes do componente do RenderingNG são configuradas e como o pipeline de renderização flui por elas.
Começando no nível mais alto, as tarefas de renderização são:
- Renderizar conteúdo em pixels na tela.
- Animar efeitos visuais no conteúdo de um estado para outro.
- Role em resposta à entrada.
- Encaminha a entrada de forma eficiente para os lugares certos, para que os scripts de desenvolvedor e outros subsistemas possam responder.
O conteúdo a ser renderizado é uma árvore de frames para cada guia do navegador, além da interface do navegador. E um stream de eventos de entrada brutos de telas touch, mouses, teclados e outros dispositivos de hardware.
Cada frame inclui:
- Estado do DOM
- CSS
- Telas
- Recursos externos, como imagens, vídeos, fontes e SVG
Um frame é um documento HTML, além do URL dele. Uma página da Web carregada em uma guia do navegador tem um frame de nível superior, frames filhos para cada iframe incluído no documento de nível superior e os descendentes de iframe recursivos.
Um efeito visual é uma operação gráfica aplicada a um bitmap, como rolagem, transformação, clipe, filtro, opacidade ou mesclagem.
Componentes da arquitetura
No RenderingNG, essas tarefas são divididas de forma lógica em vários estágios e componentes de código. Os componentes acabam em vários processos, linhas de execução e subcomponentes da CPU nessas linhas de execução. Cada um deles desempenha um papel importante para alcançar confiabilidade, desempenho escalonável e extensibilidade para todo o conteúdo da Web.
Estrutura do pipeline de renderização
A renderização prossegue em um pipeline com várias etapas e artefatos criados ao longo do caminho. Cada fase representa um código que executa uma tarefa bem definida na renderização. Os artefatos são estruturas de dados que são entradas ou saídas dos estágios.
As etapas são:
- Animar:mude estilos computados e transforme árvores de propriedades ao longo do tempo com base em cronogramas declarativos.
- Estilo:aplique CSS ao DOM e crie estilos computados.
- Layout:determine o tamanho e a posição dos elementos do DOM na tela e crie a árvore de fragmentos imutáveis.
- Pré-pintura:calcule árvores de propriedades e invalide todas as listas de exibição e tijolos de textura da GPU existentes, conforme apropriado.
- Rolar:atualize o deslocamento de rolagem de documentos e elementos DOM roláveis, modificando as árvores de propriedades.
- Paint:computa uma lista de exibição que descreve como rasterizar blocos de textura de GPU do DOM.
- Confirmação:copia árvores de propriedades e a lista de exibição para a linha de execução do compositor.
- Camada:divida a lista de exibição em uma lista de camadas compostas para rasterização e animação independentes.
- Worklets de rasterização, decodificação e pintura:convertem listas de exibição, imagens codificadas e código de worklet de pintura, respectivamente, em tijolos de textura da GPU.
- Ativar:crie um frame do compositor que represente como desenhar e posicionar os blocos de GPU na tela, junto com os efeitos visuais.
- Agregado:combine frames de todos os compositores visíveis em um único frame global.
- Draw:execute o frame do compositor agregado na GPU para criar pixels na tela.
Os estágios do pipeline de renderização podem ser ignorados se não forem necessários. Por exemplo, animações de efeitos visuais e rolagem podem pular o layout, a pré-pintura e a pintura. É por isso que a animação e a rolagem são marcadas com pontos amarelos e verdes no diagrama. Se o layout, a pré-pintura e a pintura puderem ser pulados para efeitos visuais, eles poderão ser executados inteiramente na linha de execução do compositor e pularem a linha de execução principal.
A renderização da interface do navegador não é mostrada diretamente aqui, mas pode ser considerada uma versão simplificada desse mesmo pipeline e, na verdade, a implementação compartilha grande parte do código. O vídeo (também não mostrado diretamente) geralmente é renderizado com um código independente que decodifica frames em blocos de textura de GPU que são conectados a frames do compositor e à etapa de renderização.
Estrutura de processo e linha de execução
Processos da CPU
O uso de vários processos de CPU alcança o isolamento de desempenho e segurança entre sites e do estado do navegador, e o isolamento de estabilidade e segurança do hardware da GPU.