Você já quis informar ao navegador sobre uma fonte, um script ou
outro recurso importante que será necessário para a página sem atrasar o evento
onload dela? <link rel="preload"> oferece aos desenvolvedores Web para fazer exatamente isso, usando uma sintaxe de elemento HTML familiar com alguns atributos-chave para determinar o comportamento exato. É um
padrão de rascunho que faz parte do
lançamento do Chrome 50.
Os recursos carregados por <link rel="preload"> são armazenados localmente no navegador
e ficam efetivamente inertes até serem referenciados no DOM, JavaScript ou
CSS. Por exemplo, este é um possível caso de uso em que um arquivo de script é pré-carregado, mas não é executado imediatamente, como seria se fosse incluído por uma tag <script> no DOM.
<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
// Later on, after some condition has been met, we run the preloaded
// JavaScript by inserting a <script> tag into the DOM.
var usedLaterScript = document.createElement('script');
usedLaterScript.src = 'used-later.js';
document.body.appendChild(usedLaterScript)
</script>
O que está acontecendo aqui? Os desenvolvedores Web precisam conhecer o atributo href usado nesse exemplo, porque é o atributo padrão usado para especificar
o URL de qualquer recurso vinculado.
No entanto, o atributo as provavelmente é
novo para você e é usado no contexto de um elemento <link>
para dar ao navegador mais contexto sobre o
destino da
solicitação de pré-carregamento que está sendo feita. Essas informações extras garantem que o navegador defina os cabeçalhos e a prioridade da solicitação adequados e aplique todas as diretivas da Política de Segurança de Conteúdo que possam estar em vigor para o contexto correto dos recursos.
Saiba (muito) mais
Yoav Weiss escreveu
o guia definitivo
sobre o uso de <link rel="preload"> (links em inglês). Se você tiver curiosidade e quiser começar a usá-la
nas suas próprias páginas, recomendo ler o artigo dele para saber mais sobre
os benefícios e casos de uso dos criativos.
Até mais, <link rel="subresource">
A <link rel="preload"> substitui o <link rel="subresource">, que tem
bugs e desvantagens significativos e
que nunca foi implementado em outros navegadores além do Chrome. Dessa forma, o Chrome 50
remove o suporte a
<link rel="subresource">.