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? O <link rel="preload"> permite que os desenvolvedores da Web façam exatamente
isso, usando uma sintaxe de elemento HTML conhecida com alguns atributos principais 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 adicionais garantem que o
navegador defina cabeçalhos de solicitação apropriados, a prioridade da solicitação e aplique
todas as diretrizes relevantes da política de segurança de conteúdo
que possam estar em vigor para o contexto de recurso correto.
Saiba muito mais
Yoav Weiss escreveu
o guia definitivo
para usar <link rel="preload">. Se você ficou interessado e quer começar a usar o recurso
nas suas páginas, recomendo ler o artigo para saber mais sobre
os benefícios e casos de uso criativo.
Até mais, <link rel="subresource">
<link rel="preload"> substitui <link rel="subresource">, que tem
bugs e desvantagens significativos e
nunca foi implementado em navegadores que não sejam o Chrome. Por isso, o Chrome 50
remove o suporte para
<link rel="subresource">.