O WebRender da Mozilla elevou páginas lentas de 15 FPS para 60 FPS com renderização de motor de jogo

Os navegadores passaram anos ficando mais suaves fazendo menos: invalidando apenas os retângulos alterados, armazenando partes em cache como camadas, compondo-as e, por fim, movendo ambas as tarefas para a GPU. No Mozilla Hacks, em outubro de 2017, Lin Clark explicou por que as páginas ainda travavam. As camadas custam memória e tempo de transferência, e os navegadores precisam adivinhar quantas uma página necessita. Camadas demais enchem a memória e atrasam o compositor; camadas de menos fazem com que uma camada repintada seja composta sem que nada tenha mudado, tocando cada pixel duas vezes. Animar uma cor de fundo força uma repintura da camada inteira, aconteça o que acontecer.

O WebRender, tecnologia do Servo que chegava ao Firefox como Quantum Render, seguiu um precedente diferente: os motores de jogos 3D repintam cada pixel de cada quadro e mantêm 60 FPS de forma mais confiável que os navegadores, em GPUs com centenas ou milhares de núcleos que sombreiam pixels em paralelo. Assim, o WebRender removeu a fronteira entre pintura e composição. A saída do layout tornou-se uma lista de exibição de instruções de desenho de alto nível, não vinculada a nenhuma API gráfica. O RenderBackend do WebRender convertia essa lista em chamadas de desenho em lote para a GPU, e a GPU repintava toda a cena visível da página a cada quadro, sem adivinhar camadas.

Tornar acessível o redesenho do quadro inteiro exigiu eliminação de trabalho. Itens fora da tela eram descartados antes de chegar à GPU. Uma árvore de tarefas de renderização planejava o número mínimo de texturas offscreen caras para filtros e contextos de empilhamento. As chamadas de desenho eram agrupadas em lotes para manter ocupados os núcleos paralelos da GPU. A renderização foi dividida em uma passagem opaca da frente para trás, que pulava pixels cobertos, e uma passagem translúcida de trás para frente — z-culling, segundo o artigo, e um grande ganho em páginas típicas. Os glifos de texto continuaram sendo tarefa da CPU, mas eram armazenados em cache numa textura mantida de quadro a quadro.

O objetivo era a consistência, não apenas a velocidade: sem quedas abruptas de desempenho, 60 FPS suaves por maior que fosse a tela ou por mais que a página mudasse. O artigo relatou que páginas que se arrastavam a 15 FPS no Chrome ou no Firefox da época rodavam a 60 FPS com o WebRender, e enquadrou o trabalho como preparação para telas 4K e para a WebVR, que renderiza um quadro para cada olho a 90 FPS.

Pare de adivinhar camadas: entregue à GPU uma lista de exibição de alto nível e repinte a página inteira a cada quadro, no estilo dos motores de jogo

As GPUs têm de centenas a milhares de núcleos que sombreiam pixels em paralelo, então repintar toda a página visível a cada quadro é a carga de trabalho para a qual foram construídas, não uma tarefa do tamanho da CPU.

Uma lista de exibição retida é uma descrição pequena e independente de API da cena, então a CPU constrói os comandos uma vez e o RenderBackend pode descartá-los, ordená-los e agrupá-los em lotes antes que qualquer trabalho de pixel aconteça.

O redesenho da cena inteira elimina a adivinhação de camadas e seus modos de falha: sem contagens de camadas mal julgadas, sem tratamento duplo de pixels, de modo que os tempos de quadro deixam de despencar em quedas abruptas de desempenho.

A eliminação de trabalho mantém o redesenho barato: descarte, menos alvos offscreen, agrupamento em lotes e z-culling reduzem o que a GPU sombreia, enquanto os glifos renderizados pela CPU ficam num cache de textura, não no caminho por quadro.

Quando heurísticas incrementais continuam atingindo quedas abruptas no pior caso, mude o modelo: descreva a cena inteira uma vez e deixe o hardware massivamente paralelo redesenhá-la a cada quadro

O WebRender não estava na versão do Firefox Quantum que se seguiu: Lin Clark escreveu nos comentários do artigo que ele não chegaria antes do Firefox 57, e o texto planejava a integração ao longo de 2018 sob o projeto Quantum Render, com uma versão inicial já disponível por trás de uma flag. A demonstração vinculada mostrava páginas que rodavam a 15 FPS no Chrome ou no Firefox da época rodando a 60 FPS com o WebRender, e o explicativo atraiu 853 pontos e 207 comentários no Hacker News em 10 de outubro de 2017.