¿Alguna vez quisiste informar al navegador sobre una fuente, una secuencia de comandos o
otros recursos necesarios para la página, sin retrasar
¿onload evento? <link rel="preload"> ofrece a los desarrolladores web la posibilidad de hacer simplemente
que, mediante una sintaxis conocida de elementos HTML con algunos atributos clave
determinar el comportamiento exacto. Es un
estándar en borrador que se aplica como parte del
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 están efectivamente inertes hasta que se haga referencia a ellos en el DOM, JavaScript o
o CSS. Por ejemplo, aquí hay un posible caso de uso en el que un archivo de secuencia de comandos se
precargado, pero no ejecutado de inmediato, como habría sido si se
se incluye mediante 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 debe
familiar para los desarrolladores web, ya que es el atributo estándar que se usa para especificar
la URL de cualquier recurso vinculado.
El atributo as es
Sin embargo, probablemente es nuevo para ti, y se usa en el contexto de un elemento <link>.
para darle al navegador más contexto sobre el
destino de
que se realiza la solicitud de precarga. Esta información adicional garantiza que la
navegador establecerá los encabezados y la prioridad de las solicitudes adecuados, y aplicará
cualquier Política de Seguridad del Contenido pertinente
directivas que se podrían implementar
para el contexto de recursos correcto.
Más información
Yoav Weiss escribió
la guía definitiva
para usar <link rel="preload">. Si te interesa y quieres comenzar a usarla
en tus propias páginas, te recomiendo que leas su artículo para obtener más información sobre
beneficios y casos de uso creativos.
Adiós <link rel="subresource">
<link rel="preload"> sustituye a <link rel="subresource">, que tiene
errores y desventajas significativos
que nunca se implementó en navegadores que no sean Chrome. Por lo tanto, Chrome 50
quita la compatibilidad con
<link rel="subresource">