¿Alguna vez quisiste informar al navegador sobre una fuente, una secuencia de comandos o algún otro recurso importante que necesita la página, sin retrasar el evento onload de la página? <link rel="preload"> les brinda a los desarrolladores web la posibilidad de hacerlo, mediante una sintaxis de elementos HTML que ya conoce, con algunos atributos clave para determinar el comportamiento exacto. Se trata de un borrador estándar que se incluye como parte de la versión de Chrome 50.
Los recursos que se cargan a través de <link rel="preload"> se almacenan de forma local en el navegador y permanecen inertes hasta que se hace referencia a ellos en el DOM, JavaScript o CSS. Por ejemplo, este es un posible caso de uso en el que un archivo de secuencia de comandos se precarga, pero no se ejecuta de inmediato, como si se hubiera incluido a través de una etiqueta <script> en el 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>
Entonces, ¿qué está pasando aquí? Los desarrolladores web deben conocer el atributo href que se usa en ese ejemplo, ya que es el atributo estándar que se usa para especificar la URL de cualquier recurso vinculado.
Sin embargo, es probable que el atributo as sea nuevo para ti y se use en el contexto de un elemento <link> para brindarle al navegador más contexto sobre el destino de la solicitud de precarga que se realiza. Esta información adicional garantiza que el navegador establezca los encabezados y la prioridad de solicitud adecuados, y aplique cualquier directiva relevante de la Política de Seguridad del Contenido que pueda aplicarse al contexto de recursos correcto.
Aprender (mucho) más
Yoav Weiss escribió la guía definitiva para usar <link rel="preload">. Si te intriga y quieres comenzar a usarlo en tus propias páginas, te recomendamos que leas este artículo para obtener más información sobre los beneficios y los casos de uso creativos.
Adiós, <link rel="subresource">
<link rel="preload"> sustituye a <link rel="subresource">, que tiene errores y desventajas importantes, y que nunca se implementó en otros navegadores aparte de Chrome. Por lo tanto, Chrome 50 quita la compatibilidad con <link rel="subresource">.