Apresentação da NoState Prefetch

Katie Hempenius
Katie Hempenius

Introdução

A pré-busca sem estado é um novo mecanismo no 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, ela busca recursos com antecedência, mas, ao contrário da pré-renderização, não executa JavaScript nem renderiza nenhuma parte da página com antecedência. O objetivo da pré-busca sem estado é usar menos memória do que a pré-renderização, além de reduzir o tempo de carregamento da página.

A pré-busca sem estado não é uma API, mas 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 a 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 para conferir estatísticas sobre o uso dele.

Motivação

Houve duas motivações principais para a introdução do NoState Prefetch:

Reduzir o uso da memória

A preempção sem estado usa apenas cerca de 45 MiB de memória. Manter o scanner de pré-carregamento é a principal despesa de memória do NoState Prefetch, 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 de memória é limitado a 150 MiB. Esse alto consumo de memória o torna inadequado para dispositivos básicos (ou seja, com ≤ 512 MB de RAM). Como resultado, o Chrome não faz pré-renderização em dispositivos de baixo custo, mas faz a 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, reprodução de música ou vídeo) ou com estado (por exemplo, mutação de sessão ou 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 o código nem renderiza a página. Isso facilita a prevenção de ações stateful e voltadas ao usuário.

Implementação

As etapas a seguir explicam como o NoState Prefetch funciona.

  1. O NoStatePrefetch não é 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 está em um dispositivo de baixo custo e b) o usuário não está em uma rede celular.

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

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

  3. O recurso que está sendo carregado com a pré-busca sem estado é buscado. O HTMLPreloadScanner em seguida verifica esse recurso para descobrir os subrecursos que precisam ser buscados. Se o recurso principal ou qualquer um dos subrecursos tiver um worker de serviço registrado, essas solicitações vão passar pelo worker de serviço apropriado.

    A precarga sem estado só oferece suporte ao método HTTP GET. Ela não vai buscar subrecursos que exijam 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 de cliente SSL ou substituições manuais).

  4. As sub-recursos que são buscadas são buscadas com uma prioridade líquida "IDLE".

    A prioridade de rede "IDLE" é a menor prioridade de rede 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.

    A pré-busca sem estado armazena em cache todos os recursos, exceto aqueles com o cabeçalho Cache-Control no-store. 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 5 minutos.

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

    Se o tempo limite dos subrecursos expirar, 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 esse é o "NoState" em "NoState Prefetch".

    Nesse ponto do processo de carregamento de página "normal", o navegador provavelmente faria coisas que modificam o estado dele: por exemplo, executar JavaScript, modificar sessionStorage ou localStorage, reproduzir músicas ou vídeos, usar a API History ou solicitar o usuário. As únicas modificações de estado que ocorrem no pré-carregamento sem estado são a atualização do cache DNS quando as respostas chegam e a atualização do armazenamento de cookies se uma resposta contém 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, ela não fica imediatamente visível. Ela ainda precisa ser renderizada pelo navegador. O navegador não vai reutilizar o renderizador usado para a 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 dela vai passar pelo service worker novamente.

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

Impacto no Google Analytics

As páginas carregadas usando a pré-busca sem estado 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 a página é mostrada ao usuário. Esses scripts dependem da execução do JavaScript, e o NoState Prefetch não executa JavaScript.

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

Confira agora

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

  • Implementar a dica de recurso prerender
  • Buscar o primeiro resultado na 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 conferir como tem usado o NoStatePrefetch.

Para conferir a lista de sites que foram carregados com a precarga NoState, acesse chrome://net-internals/#prerender.

Para conferir as estatísticas do uso da pré-busca sem estado, acesse chrome://histograms e pesquise "NoStatePrefetch". Há três histogramas diferentes de pré-busca sem estado: 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 pela página de resultados da pesquisa do Google)
  • "omnibox_NoStatePrefetch" (estatísticas de uso pela barra de endereço do Chrome)