Paint Holding: reduzindo o flash de branco em navegações de mesma origem.

Por um tempo, o Chrome limpava a tela ao fazer a transição para uma nova página para garantir aos usuários que a página estava sendo carregada. Esse "flash de branco" é o breve momento em que o navegador mostra uma pintura branca ao carregar uma página. Isso pode distrair entre as navegações, especialmente quando a página é razoavelmente rápida para alcançar um estado mais interessante.

No entanto, para páginas que carregam muito rápido, essa abordagem é prejudicial à experiência do usuário. Na animação a seguir, você vai conferir um exemplo de como isso é feito hoje.

Somos grandes fãs desse site e ficamos chateados por causa de um flash branco na experiência de qualidade. Por isso, queríamos corrigir o problema. Fizemos isso com um novo comportamento que chamamos de Paint Holding, em que o navegador aguarda brevemente antes de começar a pintar, especialmente se a página for rápida o suficiente. Isso garante que a página seja renderizada como um todo, proporcionando uma experiência realmente instantânea.

Para isso, deferimos os commits do compositor até que um determinado carregamento de página sinal (PLS, na sigla em inglês) (por exemplo, First Contentful Paint / tempo limite fixo) foi atingido. Fazemos a distinção entre o trabalho de renderização da linha de execução principal e a confirmação na linha de execução de implementação (apenas a última é adiada). Esperar até que um PLS ocorra reduz a probabilidade de flashes de branco/cor sólida.

Nosso objetivo com esse trabalho era possibilitar a navegação no Chrome entre duas páginas que têm a mesma origem para serem perfeitas e, assim, fornecerem uma navegação padrão rápida sem flash de fundo branco/contínuo entre o antigo e o novo conteúdo.

Teste o Paint Holding no Chrome Canary (Chrome 76) e nos conte o que você achou. Os desenvolvedores não precisam se preocupar em fazer modificações nas páginas para aproveitar esse recurso.