Suporte a pré-renderização e pré-busca

Use pré-renderização e pré-busca no Internet Explorer 11 para aprimorar a navegação de seu site. Pré-renderização (também chamada de pré-carregamento) especifica uma página na internet para ser carregada (renderizada) em segundo plano enquanto o usuário lê a página atual, e a pré-busca identifica os recursos a serem baixados em segundo plano. Como ambos baixam conteúdo antes que ele seja necessário, esses recursos ficam disponíveis instantaneamente quando necessário pelo usuário.

Aqui, você vai aprender como usar elementos link para pré-renderizar páginas e pré-buscar recursos em segundo plano.

Melhore o desempenho obtendo o que precisa com antecedência

Quando um usuário lê uma página da Web usando o IE11, o navegador pode carregar e renderizar conteúdo adicional em segundo plano. Como um desenvolvedor da Web, você pode identificar a página da e os recursos da Web que o usuário possa precisar em seguida. Fazendo isso, você melhora o desempenho percebido do seu site, pois o conteúdo está pronto e pode ser exibido mais rapidamente.

Suponha que você tenha escrito um artigo dividido em páginas da Web separadas. À medida que o usuário lê cada página, você pode pré-carregar a próxima para que ela seja exibida quando o usuário estiver pronto para ela. Ou, se tiver criado um site que contém vários artigos, você poderá usar a página inicial para baixar folhas de estilo, imagens e outros recursos usados em cada página para que os artigos sejam carregados mais rapidamente.

Você pode usar o elemento link para fazer isso. A partir do IE11, os valores seguintes agora têm suporte para o atributo rel:

ValorDescrição e exemplo
pré-renderização

Identifica uma página para carregar em segundo plano, caso o usuário queira navegar até ela em seguida.

Exemplo:


<link rel="prerender" href="http://example.com/nextpage.html" />

O IE11 pode pré-renderizar uma página em segundo plano. Se uma segunda solicitação de pré-renderização for encontrada, ela substituirá a primeira. Solicitações de pré-renderização adicionais são ignoradas.

pré-busca

Identifica um arquivo de recurso, como uma imagem ou uma folha de estilo CSS, para ser baixado no cache.

Exemplo:


<link rel="prefetch" href="http://example.com/style.css" />

O IE11 dá suporte a até dez (10) solicitações de pré-busca. Solicitações adicionais são ignoradas.

pré-busca de dns

Identifica uma consulta DNS para resolver o segundo plano, para que as solicitações possam ocorrer mais rapidamente.

Exemplo:


<link rel="dns-prefetch" href="http://example.com/"/>

 

Observação  O Internet Explorer também dá suporte para os valores "next" e "prev" do atributo rel. Para obter mais informações, veja Determinando alvos para a próxima página.

As URLs de destino devem fazer referência a nomes de arquivos individuais (relativos ou totalmente qualificados). Os caracteres curinga não são permitidos.

Carregando recursos de segundo plano de forma eficaz

Quando você usa o elemento link para pré-carregar uma página da Web, o IE11 carrega e renderiza a página em segundo plano.

Carregar uma página da Web em segundo plano não reduz o tempo de carregamento necessário. A página requer o mesmo número de solicitações de rede, independentemente de ser carregada em primeiro ou segundo plano.

A diferença está na perspectiva do usuário. Como as páginas pré-renderizadas são carregadas e renderizadas em segundo plano, elas são exibidas imediatamente quando o usuário clica no link. Como os usuários não vêem o carregamento da página, eles sentem que ela é exibida com mais rapidez.

A pré-renderização requer as seguintes condições:

  • Se o usuário estiver em uma rede limitada, a capacidade de pré-renderizar páginas da Web dependerá do plano de uso de dados para o dispositivo utilizado para exibir a página.
  • A URL de destino não pode ser um download do arquivo.
  • A URL de destino usa os protocolos "http://" ou "https://".
  • A URL de destino é um documento de nível superior, ou seja, não pode ser um documento iframe.
  • Somente uma página da Web pode ser pré-renderizada por vez.
  • O documento que contém o elemento link fica visível, ou seja, ele é carregado na guia em primeiro plano e não fica minimizado.

As páginas não podem ser totalmente renderizadas em segundo plano se alguma destas condições se aplicar:

  • A página de destino dispara uma mudança na interface do usuário, como uma caixa alert, uma chamada para window.open ou uma notificação de segurança.
  • A página de destino reproduz automaticamente um arquivo de mídia usando o elemento video ou audio.
  • A página de destino modifica o travel log.
  • A janela de ferramentas F12 está aberta.

Nesses casos, o alvo principal é pausado quando está em segundo plano. Quando o usuário escolhe a página de destino, ela é exibida e a renderização é retomada de onde parou.

Páginas pré-renderizadas nem sempre são exibidas para o usuário. Estas condições fazem com que páginas pré-renderizadas sejam descartadas da memória sem serem exibidas:

  • O usuário não abre a página de destino dentro de cinco minutos.
  • O usuário abre uma página diferente.
  • O usuário muda para uma guia ou instância diferente do navegador.
  • Um processo JavaScript adiciona um novo elemento link que solicita uma página diferente para pré-renderizar.
  • Ocorre um erro durante o carregamento da página de destino, incluindo o código de erro HTTP 500 (erro do servidor), 404 (recurso não encontrado) ou erros relacionados (como problemas de conexão).

Quando uma página pré-renderizada é descartada e depois solicitada posteriormente, ele é carregada diretamente no servidor host. Se a página ainda estiver no cache do navegador, talvez ela seja carregada com mais rapidez. Porém, não há garantia que isso aconteça.

O carregamento de uma página em segundo plano pode levar a certos efeitos colaterais. Especificamente, para atividades executadas durante um evento de load, você pode perceber que:

  • Os controles do Microsoft ActiveX não são carregados até que o usuário exiba a página. Use a propriedade readyState para verificar os objetos disponíveis antes de confiá-los ao JavaScript.

  • Certas animações podem não aparecer quando a página é exibida. Isso ocorre porque, provavelmente, elas já foram executadas enquanto a página era carregada em segundo plano.

  • Os temporizadores pode dar resultados inesperados.

  • Cookies, conteúdo de cache e alterações feitas por operações assíncronas (como IndexedDB e armazenamento na web) são mantidos.

Se você encontrar estes ou outros efeitos colaterais relacionados, use a API de Visibilidade de Página para determinar quando a página está visível. Animações, por exemplo, devem ser adiadas até que a página esteja visível. Para saber mais, veja Uso eficaz de pré-renderização e pré-busca.

Especificação

HTML5, Seção 4.12.5.9

 

 

Mostrar:
© 2015 Microsoft