¿Alguna vez quisiste informar al navegador sobre una fuente, una secuencia de comandos o algún otro recurso importante que necesitará la página, sin retrasar el evento onload? <link rel="preload"> permite a los desarrolladores web hacer precisamente eso, mediante una sintaxis de elemento HTML conocida con algunos atributos clave para determinar el comportamiento exacto. Es un borrador estándar que se envía 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 haga referencia a ellos en el DOM, JavaScript o CSS. Por ejemplo, aquí se muestra un posible caso de uso en el que un archivo de secuencia de comandos se precarga, pero no se ejecuta de inmediato, como se habría hecho 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>
¿Qué sucede aquí? El atributo href que se usa en ese ejemplo debería ser conocido para los desarrolladores web, 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 usa 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 la solicitud adecuados, y que aplique las directivas de la Política de Seguridad del Contenido relevantes que se podrían aplicar para el contexto de recursos correcto.
Más información
Yoav Weiss escribió la guía definitiva sobre el uso de <link rel="preload">. Si te interesa y quieres comenzar a usarlo en tus propias páginas, te recomiendo que leas su 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 significativos y que nunca se implementó en navegadores distintos de Chrome. Por lo tanto, Chrome 50 quita la compatibilidad con <link rel="subresource">.