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

Mariko Kosaka

CPU, GPU, memória e arquitetura de vários processos

Nesta série de blogs em quatro partes, examinaremos o navegador Chrome, desde a arquitetura de alto nível até 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 sabe por que uma técnica específica foi sugerida para melhorar o desempenho, esta série é para você.

Na primeira parte desta série, analisaremos a terminologia básica de computação e a arquitetura de vários processos do Chrome.

No centro do computador estão a CPU e a GPU

Para entender o ambiente em que o navegador está sendo executado, precisamos entender algumas partes do computador e o que elas fazem.

CPU

CPU
Figura 1: quatro núcleos de CPU como funcionários de escritório sentados em cada tarefa de atendimento à medida que chegam

A primeira é a Unit Central, ou CPU,. A CPU pode ser considerada o cérebro do seu computador. O núcleo da CPU, retratado aqui como um funcionário de escritório, pode processar diversas tarefas uma a uma à medida que entram. Ele pode lidar com tudo, desde matemática até arte, e saber responder a uma ligação de um cliente. No passado, a maioria das CPUs era um único chip. Um núcleo é como outra CPU no mesmo chip. Em hardwares modernos, geralmente há mais de um núcleo, proporcionando mais capacidade de computação para smartphones e laptops.

GPU

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

A gráfica tocessando Unit, ou GPU, é outra parte do computador. Ao contrário da CPU, a GPU é boa para lidar com 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 de gráficos, "que usam 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 é possível usar apenas a GPU.

Quando você inicia um aplicativo no computador ou smartphone, ele é alimentado pela CPU e GPU. Normalmente, os aplicativos são executados na CPU e na GPU usando mecanismos fornecidos pelo sistema operacional.

Hardware, SO, aplicativo
Figura 3: três camadas da arquitetura de computadores. "Hardware de máquina" na parte de baixo, "Sistema operacional" no meio e "Aplicativo" na parte de cima.

Executar programa em Process e Thread

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

Outro conceito a ser compreendido antes de mergulhar na arquitetura do navegador é o processo e o Thread. Um processo pode ser descrito como o programa em execução de um aplicativo. Uma linha de execução é aquela que está dentro do processo e executa qualquer parte dele.

Quando você inicia um aplicativo, um processo é criado. O programa pode criar linhas de execução para ajudar a funcionar, mas isso é opcional. O sistema operacional fornece ao processo uma "fração" de memória para trabalhar, e todo o estado do aplicativo é mantido nesse espaço de memória particular. Quando você fecha o aplicativo, o processo também desaparece e o sistema operacional libera a memória.

processo e memória
Figura 5: diagrama de um processo usando espaço de memória e armazenando dados do aplicativo

Um processo pode solicitar que o sistema operacional inicie outro processo para executar tarefas diferentes. Quando isso acontece, diferentes partes da memória são alocadas para o novo processo. Se dois processos precisarem conversar, use a Inter Rocesso Comunicação (IPC). Muitos aplicativos são projetados para funcionar dessa maneira. Assim, se um processo de worker não responder, ele poderá ser reiniciado sem interromper outros processos que executam partes diferentes do aplicativo.

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

Arquitetura do navegador

Como um navegador da Web é criado usando processos e encadeamentos? Bem, pode ser um processo com muitas linhas de execução diferentes ou muitos processos distintos em que algumas linhas de execução se comunicam por IPC.

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

O importante aqui é notar que essas diferentes arquiteturas são detalhes de implementação. Não há especificações padrão sobre como se pode criar um navegador da Web. A abordagem de um navegador pode ser completamente diferente da outra.

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

Na parte de cima está o processo do navegador em conjunto com outros processos que cuidam de diferentes partes do aplicativo. Para o processo do renderizador, vários processos são criados e atribuídos a cada guia. Até recentemente, o Chrome dava um processo para cada guia quando possível. Agora, ele tenta dar um processo próprio a cada site, incluindo iframes. Consulte Isolamento de sites.

arquitetura do navegador
Figura 8: diagrama da arquitetura de vários processos do Chrome. Várias camadas são mostradas em "Processo do renderizador" para representar o Chrome executando vários processos do renderizador 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 a parte "cromada" do aplicativo, incluindo a barra de endereço, favoritos e os botões "Voltar" e "Avançar".
Também processa as partes invisíveis e privilegiadas de um navegador da Web, como solicitações de rede e acesso a arquivos.
Renderizador Controla tudo dentro da guia em que um site é exibido.
Plug-in Controla todos os plug-ins usados pelo site, por exemplo, o Flash.
GPU Processa tarefas da GPU isoladamente de outros processos. Eles são separados em processos diferentes, porque as GPUs lidam com solicitações de vários apps e as desenham na mesma superfície.
Processos do Chrome
Figura 9: processos diferentes que apontam para partes distintas da interface do navegador

Existem ainda mais processos, como a extensão e os utilitários. Se você quiser ver quantos processos estão em execução no Chrome, clique no ícone do menu de opções no canto superior direito, selecione "Mais ferramentas" e, depois, "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 por eles.

Os benefícios da arquitetura de vários processos no Chrome

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

Se uma guia deixa de responder, você pode fechá-la e seguir em frente enquanto mantém as outras guias ativas. Se todas as guias estiverem em execução em um processo, quando uma delas parar de responder, todas as guias não vão responder. Que pena.

renderizador múltiplo para guias
Figura 10: diagrama mostrando vários processos executando cada guia

Outro benefício de separar o trabalho do navegador em vários processos é a segurança e o sandbox. Como os sistemas operacionais oferecem uma forma de restringir os privilégios de processos, o navegador pode colocar alguns processos no sandbox de recursos. Por exemplo, o navegador Chrome restringe o 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 o próprio espaço de memória particular, eles geralmente contêm cópias da infraestrutura comum (como o V8, que é o mecanismo JavaScript do Chrome). Isso significa mais uso da memória, já que elas não podem ser compartilhadas da forma como seriam se fossem linhas de execução dentro do mesmo processo. Para economizar memória, o Chrome limita o número de processos que ele pode ativar. O limite varia de acordo com a quantidade de memória e de CPU do dispositivo. No entanto, quando o Chrome atinge o limite, ele começa a executar várias guias do mesmo site em um processo.

Economia de mais memória: serviç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 programa navegador como um serviço, permitindo a divisão em diferentes processos ou agregada em um.

A ideia geral é que, quando o Chrome é executado com um hardware potente, ele pode dividir cada serviço em processos diferentes, proporcionando mais estabilidade. No entanto, se estiver em um dispositivo com restrição de recursos, o Chrome consolida os serviços em um único processo que economiza memória. Uma abordagem semelhante de consolidação para menos uso de memória tem sido usada em plataformas como o Android antes dessa mudança.

servificação do Chrome
Figura 11: diagrama da prestação de serviços do Chrome movendo diferentes serviços para vários processos e um único processo de navegador

Processos de renderizador por frame: isolamento de sites

O isolamento de sites é um recurso introduzido recentemente no Chrome, que executa um processo de renderizador separado para cada iframe entre sites. Falamos sobre um processo de renderizador por modelo de guia que permitia que iframes entre sites fossem executados em um único processo de renderizador com 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 política de mesma origem é o modelo de segurança principal da Web. Ela garante que um site não possa acessar dados de outros sites sem consentimento. Ignorar essa política é o principal objetivo dos ataques de segurança. O isolamento de processos é a maneira mais eficaz de separar sites. Com o Meltdown e Spectre, ficou ainda mais evidente que precisamos separar 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 em 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 atribuir diferentes processos de renderizador. Ele muda fundamentalmente a forma como os iframes se comunicam. Ao abrir o DevTools em uma página com iframes em execução em diferentes processos, o DevTools precisou implementar trabalhos nos bastidores para fazer com que pareça simples. Até mesmo executar um simples Ctrl+F para encontrar uma palavra em uma página significa pesquisar em diferentes processos de renderizador. Você pode entender por que os engenheiros do navegador falam sobre o lançamento do isolamento de sites como um marco importante.

Conclusão

Nesta postagem, abordamos uma visão de alto nível da arquitetura do navegador e abordamos os benefícios de uma arquitetura de vários processos. Também falamos sobre a servicização e o isolamento de sites no Chrome, que está intimamente relacionado à arquitetura de vários processos. Na próxima postagem, veremos o que acontece entre esses processos e linhas de execução para exibir um site.

Você gostou da postagem? Se você tiver dúvidas ou sugestões para a próxima postagem, entre em contato comigo pelo e-mail @kosamari no Twitter.

A seguir: o que acontece na navegação