Análise detalhada de um navegador da Web moderno (parte 1)

Mariko Kosaka

CPU, GPU, memória e arquitetura de processos múltiplos

Nesta série de blogs em quatro partes, veremos o interior do navegador Chrome, da arquitetura de alto nível à as especificidades do pipeline de renderização. Se você já se perguntou como o navegador transforma seu código em um site funcional ou não tiver certeza por que uma técnica específica é sugerida para melhorar o desempenho melhorias, esta série é para você.

Na primeira parte desta série, analisaremos a terminologia de computação principal e as ferramentas arquitetura de processos múltiplos.

No núcleo do computador estão a CPU e a GPU

Para entender o ambiente em que o navegador está sendo executado, precisamos entender alguns peças de computador e o que elas fazem.

CPU

CPU
Figura 1: quatro núcleos de CPU como funcionários de escritório sentados em cada mesa lidando com tarefas à medida que chegam

O primeiro é a Unita de acesso central, ou CPU. A CPU pode ser considerada sua no cérebro de um computador. Um núcleo da CPU, retratado aqui como um funcionário de escritório, pode lidar com muitas tarefas diferentes uma por uma, à medida que elas chegam. Ele consegue lidar com tudo, de matemática a arte, e sabe como responder a uma chamada com um cliente. No passado, a maioria das CPUs era um único chip. Um núcleo é como outra CPU que reside o mesmo chip. Nos hardwares modernos, geralmente há mais de um núcleo, o que aumenta a capacidade de computação para seus telefones e laptops.

GPU

GPU
Figura 2: muitos núcleos de GPU com uma chave inglesa sugerindo que eles processam uma tarefa limitada

Atrafamento do Unit, ou GPU, é outra parte do computador. Ao contrário da CPU, A GPU é boa para tarefas simples, mas em vários núcleos ao mesmo tempo. Como o nome sugere, ele foi desenvolvido inicialmente para lidar com gráficos. É por isso que no contexto dos gráficos "usando GPU" ou "com suporte de GPU" está associado à renderização rápida e à interação suave. Nos últimos anos, com a computação acelerada por GPU, cada vez mais computação se tornou possível em apenas por GPU.

Quando você inicia um aplicativo no computador ou telefone, a CPU e a GPU são responsáveis por o aplicativo. Normalmente, os aplicativos são executados na CPU e GPU usando mecanismos fornecidos pela Sistema operacional.

Hardware, SO e aplicativo
Figura 3: três camadas de arquitetura de computadores. o hardware da máquina na parte inferior, operação "System" no meio e "Application" na parte superior.

Executar programa no Process e Thread

processos e linhas de execução
Figura 4: processo como uma caixa delimitadora, linhas como peixes abstratos nadando dentro de um processo

Outro conceito a ser compreendido antes de se aprofundar na arquitetura do navegador é o processo e o thread. Um processo pode ser descrito como um programa em execução de um aplicativo. A linha de execução é aquela dentro do processo e executa qualquer parte do programa do processo.

Ao iniciar um aplicativo, um processo é criado. O programa pode criar linhas de execução para ajudar funcionam, mas isso é opcional. O sistema operacional dá ao processo um "slab" de memória para funcionar e todo o estado do aplicativo é mantido nesse espaço de memória privada. Quando você fechar o o processo também é removido, e o sistema operacional libera a memória.

processo e memória
Figura 5: diagrama de um processo que usa espaço de memória e armazena dados do aplicativo

Um processo pode pedir ao sistema operacional para iniciar outro processo para executar tarefas diferentes. Quando isso diferentes partes da memória são alocadas para o novo processo. Se dois processos precisarem falar, eles podem usar a Comunicação de processo (IPC, na sigla em inglês). Muitos aplicativos foram projetados para funcionar dessa forma. Assim, se um processo do worker não responder, ele poderá ser reiniciado sem interromper outros processos que executam diferentes partes do aplicativo.

processo do worker e IPC
Figura 6: diagrama de processos separados que se comunicam por IPC

Arquitetura do navegador

Então, como um navegador da web é criado usando processos e segmentos? Bem, pode ser um processo com muitos linhas de execução diferentes ou vários processos diferentes, com algumas que se comunicam por IPC.

arquitetura do navegador
Figura 7: diferentes arquiteturas de navegador no diagrama de processo / linha de execução

O importante aqui é que essas diferentes arquiteturas são detalhes de implementação. Não existe uma especificação padrão sobre como se pode criar um navegador da web. A abordagem de um navegador pode ser completamente diferentes dos outros.

Para esta série de blogs, estamos usando a arquitetura recente do Chrome, descritos na figura 8.

No topo está o processo do navegador, coordenando com outros processos que cuidam de diferentes do aplicativo. No processo do renderizador, vários processos são criados e atribuídos a cada guia. Até muito recentemente, o Chrome fornecia a cada guia um processo quando podia: agora ele tenta dar cada site tem um processo próprio, incluindo iframes (consulte Isolamento de sites).

arquitetura do navegador
Figura 8: diagrama da arquitetura de processos múltiplos do Chrome. Várias camadas são mostradas em Processo do renderizador para representar o Chrome executando vários processos para cada guia.

Qual processo controla o quê?

A tabela a seguir descreve cada processo do Chrome e o que ele controla:

Processo e o que ele controla
Navegador Controla o "chrome" do aplicativo, incluindo barra de endereço, favoritos, Avançar.
Também lida com as partes invisíveis e privilegiadas de um navegador da Web, como solicitações de rede e acesso a arquivos.
Renderizador Controla tudo o que está dentro da guia em que um site é exibido.
Plug-in Controla todos os plug-ins usados pelo site, por exemplo, flash.
GPU Processa tarefas da GPU isoladamente de outros processos. Ela é separada em diferentes processos porque as GPUs lidam com solicitações de vários apps e as desenham na mesma plataforma.
Processos do Chrome
Figura 9: diferentes processos apontando para diferentes partes da interface do navegador

Há ainda mais processos, como o de extensão e os de utilitários. Se você quiser ver quantos processos estão em execução no Chrome, clique no ícone do menu "opções" no canto superior direito, selecione "Mais ferramentas" e, em seguida, selecione "Gerenciador de tarefas". Isso abre uma janela com uma lista dos processos em execução no momento e a quantidade de CPU/memória usada.

O benefício da arquitetura de processos múltiplos no Chrome

Anteriormente, mencionei que o Chrome usa vários processos de renderização. No caso mais simples, é possível imagine que cada guia tem seu próprio processo de renderizador. Digamos que você tenha três guias abertas e cada uma seja executada por um processo de renderizador independente.

Se uma guia deixar de responder, feche-a e continue enquanto mantém outras guias ativas. Se todas as guias estiverem em execução em um processo, quando uma guia deixar de responder, todas as guias não responderem. Que pena.

vários renderizadores para guias
Figura 10: diagrama mostrando vários processos em execução em cada guia

Outro benefício de separar o trabalho do navegador em vários processos é a segurança e sandbox. Como os sistemas operacionais permitem restringir o acesso privilégios, o navegador pode colocar certos processos no sandbox de determinados recursos. Por exemplo, o navegador Chrome restringe acesso arbitrário a arquivos para processos que lidam com entradas arbitrárias do usuário, como o processo do renderizador.

Como os processos têm seu próprio espaço de memória privada, eles geralmente contêm cópias de do Google (como o V8, que é um mecanismo JavaScript do Chrome). Isso significa mais uso de memória eles não podem ser compartilhados como seriam se fossem linhas dentro do mesmo processo. Para economizar memória, o Chrome limita quantos processos ele pode ativar. O limite varia de acordo com a quantidade de memória e capacidade de CPU do dispositivo, mas quando o Chrome chega o limite, ele começa a executar várias guias do mesmo site em um processo.

Economia de mais memória: veiculação no Chrome

A mesma abordagem é aplicada ao processo do navegador. A arquitetura do Chrome está passando por mudanças para executar cada parte do navegador como um serviço, o que permite a divisão em diferentes processos. ou agregar em um.

A ideia geral é que, quando o Chrome é executado em um hardware potente, ele pode dividir cada serviço em processos diferentes dão mais estabilidade, mas se for em um dispositivo com limitação de recursos, o Chrome consolida os serviços em um processo, economizando o consumo de memória. Uma abordagem semelhante para consolidar processos para diminuir o uso de memória têm sido usados em plataformas como o Android antes dessa mudança.

Serviço de veiculação do Chrome
Figura 11: diagrama de exibição do Chrome movendo diferentes serviços para vários processos e um único processo de navegação

Processos do renderizador por frame: isolamento de sites

O isolamento de sites é um recurso novo recurso no Chrome que executa um processo de renderização separado para cada iframe entre sites. Falamos sobre um processo de renderizador por modelo de guia que permitia a transferência entre sites Iframes a serem executados em um único processo de renderizador com o compartilhamento de espaço de memória entre diferentes sites. Executar a.com e b.com no mesmo processo de renderizador pode parecer aceitável. A mesma política de origem é o principal modelo de segurança da Web. ele garante que um site não possa acessar os dados de outros sem consentimento. Ignorar essa política é um objetivo principal dos ataques de segurança. O isolamento de processos é a maneira mais eficaz de separar sites. Com Meltdown e Spectre, ficou ainda mais evidente que precisamos separar os sites usando processos. Com o isolamento de sites ativado em computadores por padrão desde o Chrome 67, cada iframe entre sites em uma guia recebe um processo de renderizador separado.

isolamento de sites
Figura 12: diagrama de isolamento de sites. vários processos de renderizador que apontam para iframes dentro de um site

Habilitar o isolamento de sites tem sido um esforço de engenharia de vários anos. O isolamento de sites não é tão simples quanto atribuindo diferentes processos de renderizador, isso muda fundamentalmente a forma como os iframes se comunicam entre si. Abrir o DevTools em uma página com iframes em execução em diferentes processos significa que o DevTools teve que implementar o trabalho nos bastidores para que ele pareça perfeito. Mesmo executando um simples Ctrl+F para encontrar palavra em uma página significa pesquisar em diferentes processos do renderizador. Você pode ver o motivo engenheiros do navegador falam sobre o lançamento do isolamento de sites como um marco importante.

Conclusão

Nesta publicação, cobrimos uma visão de alto nível da arquitetura do navegador e abordamos os benefícios de uma arquitetura de processos múltiplos. Também abordamos a veiculação e o isolamento de sites no Chrome, que são está profundamente relacionada à arquitetura de vários processos. Na próxima postagem, vamos começar acontece entre esses processos e sequências para exibir um site.

Você gostou da postagem? Se você tiver dúvidas ou sugestões para a próxima postagem, será um prazer ajudar ouvidas por você em @kosamari no Twitter.

A seguir: o que acontece na navegação