Você já quis informar ao navegador sobre uma fonte, um script ou
outro recurso que será necessário para a página, sem atrasar o
onload? Com o <link rel="preload">, os desenvolvedores da Web fazem exatamente
que, usando uma sintaxe familiar de elemento HTML com alguns atributos-chave para
determinar o comportamento exato. É um
padrão de rascunho que é o envio como parte do
Versão do Chrome 50.
Os recursos carregados por <link rel="preload"> são armazenados localmente no navegador.
e ficam 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 aconteceria 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 precisa
ser familiar para desenvolvedores Web, já que é o atributo padrão usado para especificar
o URL de qualquer recurso vinculado.
O atributo as é
provavelmente nova para você e é usada no contexto de um elemento <link>
para dar ao navegador mais contexto sobre a
destino de
de pré-carregamento sendo feita. Essas informações adicionais garantem que o
navegador definirá os cabeçalhos e a prioridade da solicitação, bem como aplicar
Política de Segurança de Conteúdo relevante
diretivas que podem estar em vigor para o contexto correto do recurso.
Saiba (muito) mais
Yoav Weiss escreveu
o guia definitivo
a usar <link rel="preload">. Se você tem curiosidade e quer começar a usar
nas suas páginas, recomendo a leitura do artigo dele para saber mais sobre
os benefícios e os casos de uso criativos.
Até mais, <link rel="subresource">
<link rel="preload"> substitui <link rel="subresource">, que tem
bugs e desvantagens significativos
que nunca foi implementada em outros navegadores além do Chrome. Por isso, o Chrome 50
remove o suporte para
<link rel="subresource">