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
rascunho de padrão que está sendo enviado como parte da
versão 50 do Chrome.
Os recursos carregados por <link rel="preload"> são armazenados localmente no navegador
e são efetivamente inativos até serem referenciados no DOM, JavaScript ou
CSS. Por exemplo, aqui está 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? O atributo href usado nesse exemplo deve
ser familiar para os desenvolvedores da Web, já que é o atributo padrão usado para especificar
o URL de qualquer recurso vinculado.
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. 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">.