Apresentação da NoState Prefetch

Katie Hempenius

Publicado em: 20 de julho de 2018

Introdução

O NoState Prefetch é um novo mecanismo do Chrome que é uma alternativa ao processo de pré-renderização descontinuado, usado para ativar recursos como <link rel="prerender">. Assim como a pré-renderização, ele busca recursos com antecedência, mas não executa JavaScript nem renderiza nenhuma parte da página antecipadamente. O objetivo do NoState Prefetch é usar menos memória do que a pré-renderização, reduzindo os tempos de carregamento da página.

O pré-carregamento sem estado não é uma API, mas sim um mecanismo usado pelo Chrome para implementar várias APIs e recursos. A API Resource Hints e a pré-busca de páginas pela barra de endereço do Chrome são implementadas usando a pré-busca sem estado. Se você estiver usando o Chrome 63 ou versões mais recentes, seu navegador já estará usando o pré-busca sem estado para recursos como <link rel="prerender">.

Este artigo explica como o NoStatePrefetch funciona, as motivações para a introdução dele e instruções para usar os histogramas do Chrome e conferir estatísticas sobre o uso.

Motivação

Havia duas motivações principais para introduzir a pré-busca sem estado:

Reduzir o uso da memória

O NoState Prefetch usa apenas cerca de 45 MiB de memória. Manter o scanner de pré-carregamento é o principal gasto de memória para a pré-busca sem estado, e esse custo permanece relativamente constante em diferentes casos de uso. Aumentar o tamanho ou o volume de buscas não tem um efeito significativo na quantidade de memória consumida pela pré-busca sem estado.

Em contraste, a pré-renderização normalmente consome 100 MiB de memória, e o consumo é limitado a 150 MiB. Esse alto consumo de memória o torna inadequado para dispositivos de baixo custo (ou seja, com <= 512 MB de RAM). Como resultado, o Chrome não faz pré-renderização em dispositivos de baixo custo e, em vez disso, faz uma pré-conexão.

Facilitar o suporte a novos recursos da plataforma da Web

Com a pré-renderização, nenhuma ação voltada ao usuário (por exemplo, tocar música ou vídeo) ou com estado (por exemplo, mudar a sessão ou o armazenamento local) pode ocorrer. No entanto, pode ser difícil e complexo impedir que essas ações ocorram durante a renderização de uma página. A pré-busca sem estado só busca recursos com antecedência: ela não executa código nem renderiza a página. Isso simplifica a prevenção de ações com estado e voltadas ao usuário.

Implementação

As etapas a seguir explicam como a pré-busca sem estado funciona.

1. NoStatePrefetch é acionado.

   Uma dica de recurso de pré-renderização (ou seja, <link rel="prerender">) e alguns recursos do Chrome vão acionar a pré-busca sem estado, desde que as duas condições a seguir sejam atendidas: a) o usuário não esteja em um dispositivo de baixo custo e b) o usuário não esteja em uma rede celular.

2. Um novo renderizador dedicado é criado para a pré-busca sem estado.

   No Chrome, um renderizador é um processo responsável por pegar um documento HTML, analisá-lo, construir a árvore de renderização e mostrar o resultado na tela. Cada guia no Chrome, assim como cada processo de pré-busca sem estado, tem um renderizador próprio para oferecer isolamento. Isso ajuda a minimizar os efeitos de algo que deu errado (por exemplo, uma falha na guia) e evita que códigos maliciosos acessem outras guias ou partes do sistema.

3. O recurso que está sendo carregado com a pré-busca sem estado é buscado. O HTMLPreloadScanner analisa esse recurso para descobrir todos os sub-recursos que precisam ser buscados. Se o recurso principal ou qualquer um dos sub-recursos tiver um service worker registrado, essas solicitações vão passar pelo service worker adequado.

   A pré-busca sem estado só aceita o método HTTP GET. Ela não busca sub-recursos que exigem o uso de outros métodos HTTP. Além disso, ele não vai buscar recursos que exigem ações do usuário (por exemplo, pop-ups de autenticação, certificado do cliente SSL ou substituições manuais).

4. Os sub-recursos buscados terão uma prioridade de rede "IDLE".

   A prioridade de rede "IDLE" é a mais baixa possível no Chrome.

5. Todos os recursos recuperados pela pré-busca sem estado são armazenados em cache de acordo com os cabeçalhos de cache.

   O NoState Prefetch armazena em cache todos os recursos, exceto aqueles com o cabeçalho no-store Cache-Control. Um recurso será revalidado antes do uso se houver um cabeçalho de resposta Vary, um cabeçalho Cache-Control no-cache ou se o recurso tiver mais de cinco minutos.

6. O renderizador é encerrado depois que todos os subrecursos são carregados.

   Se os subrecursos atingirem o tempo limite, o renderizador será encerrado após 30 segundos.

7. O navegador não faz nenhuma modificação de estado, além de atualizar o armazenamento de cookies e o cache DNS local. É importante mencionar isso porque é o "NoState" em "NoState Prefetch".

   Nesse ponto do processo de carregamento de página "normal", o navegador provavelmente faria coisas que modificariam o estado do navegador: por exemplo, executar JavaScript, fazer mutações em sessionStorage ou localStorage, tocar músicas ou vídeos, usar a API History ou solicitar algo ao usuário. As únicas modificações de estado que ocorrem na pré-busca sem estado são a atualização do cache de DNS quando as respostas chegam e a atualização do armazenamento de cookies se uma resposta contiver o cabeçalho Set-Cookie.

8. Quando o recurso é necessário, ele é carregado na janela do navegador.

   No entanto, ao contrário de uma página pré-renderizada, a página não fica imediatamente visível. Ela ainda precisa ser renderizada pelo navegador. O navegador não vai reutilizar o renderizador usado para o pré-busca sem estado e vai usar um novo. Não renderizar a página com antecedência reduz o consumo de memória do NoStatePrefetch, mas também diminui o possível impacto que ele pode ter nos tempos de carregamento da página.

   Se a página tiver um service worker, o carregamento vai passar por ele novamente.

   Se a pré-busca sem estado não tiver terminado de buscar sub-recursos quando a página for necessária, o navegador vai continuar o processo de carregamento da página de onde a pré-busca sem estado parou. O navegador ainda precisará buscar recursos, mas não tantos quanto seria necessário se a pré-busca sem estado não tivesse sido iniciada.

Impacto na análise da Web

As páginas carregadas usando o NoState Prefetch são registradas por ferramentas de análise da Web em momentos ligeiramente diferentes, dependendo se a ferramenta coleta dados do lado do cliente ou do servidor.

Os scripts de análise do lado do cliente registram uma visualização de página quando ela é mostrada ao usuário. Esses scripts dependem da execução de JavaScript, e a pré-busca sem estado não executa nenhum JavaScript.

As ferramentas de análise do lado do servidor registram métricas quando uma solicitação é processada. Para recursos carregados via NoState Prefetch, pode haver uma diferença significativa de tempo entre o momento em que uma solicitação é processada e quando a resposta é realmente usada pelo cliente (se for usada). Desde o Chrome 69, a pré-busca sem estado adiciona o cabeçalho Purpose: Prefetch a todas as solicitações para que elas possam ser diferenciadas da navegação normal.

Confira agora

O NoStatePrefetch foi lançado em dezembro de 2017 no Chrome 63. No momento, ele é usado para:

• Implementar a dica de recurso prerender
• Extrair o primeiro resultado da Pesquisa Google
• Buscar páginas que a barra de endereço do Chrome prevê que serão visitadas em seguida

Você pode usar o Chrome Internals para ver como tem usado o NoStatePrefetch.

Para conferir a lista de sites carregados com a pré-busca sem estado, acesse chrome://net-internals/#prerender.

Para ver estatísticas sobre o uso do NoState Prefetch, acesse chrome://histograms e pesquise "NoStatePrefetch". Há três histogramas diferentes do NoState Prefetch, um para cada caso de uso:

• "NoStatePrefetch" (estatísticas de uso por dicas de recursos de pré-renderização)
• "gws_NoStatePrefetch" (estatísticas de uso da página de resultados da pesquisa do Google).
• "omnibox_NoStatePrefetch" (estatísticas de uso pela barra de endereço do Chrome)