Saltar al contenido

¿Cómo funciona exactamente el enlace rel=”preload”?

Recabamos por distintos espacios y así de esta forma regalarte la solución para tu problema, si continúas con inquietudes puedes dejar tu inquietud y respondemos porque estamos para ayudarte.

Solución:

En su forma más básica establece el link que tiene rel="preload" a una prioridad alta, a diferencia de la captación previa, en la que el navegador puede decidir si es una buena idea o no, la carga previa obligará al navegador a hacerlo.

===Una mirada más profunda:===

Aquí hay un fragmento de W3c

Muchas aplicaciones requieren un control detallado sobre cuándo se recuperan, procesan y aplican los recursos al documento. Por ejemplo, la aplicación puede aplazar la carga y el procesamiento de algunos recursos para reducir la contención de recursos y mejorar el rendimiento de la carga inicial. Este comportamiento generalmente se logra moviendo la obtención de recursos a una lógica de carga de recursos personalizada definida por la aplicación, es decir, las obtenciones de recursos se inician a través de elementos inyectados o mediante XMLHttpRequest, cuando se cumplen determinadas condiciones de la aplicación.

Sin embargo, también hay casos en los que es necesario recuperar algunos recursos lo antes posible, pero su lógica de procesamiento y ejecución está sujeta a requisitos específicos de la aplicación, por ejemplo, gestión de dependencias, carga condicional, garantías de pedidos, etc. Actualmente, no es posible ofrecer este comportamiento sin una penalización de rendimiento.

La declaración de un recurso a través de uno de los elementos existentes (p. ej., img, script, enlace) combina la obtención y la ejecución de recursos. Mientras que una aplicación puede querer obtener, pero retrasar la ejecución del recurso hasta que se cumpla alguna condición. La obtención de recursos con XMLHttpRequest para evitar el comportamiento anterior incurre en una grave penalización de rendimiento al ocultar las declaraciones de recursos del DOM del agente de usuario y los analizadores de precarga. Las recuperaciones de recursos solo se envían cuando se ejecuta el JavaScript relevante, lo que debido a la abundancia de secuencias de comandos de bloqueo en la mayoría de las páginas introduce retrasos significativos y afecta el rendimiento de la aplicación. La palabra clave preload en elementos de enlace proporciona una primitiva de recuperación declarativa que aborda el caso de uso anterior de iniciar una recuperación anticipada y separar la recuperación de la ejecución de recursos. Como tal, la palabra clave de precarga sirve como una primitiva de bajo nivel que permite que las aplicaciones construyan comportamientos personalizados de carga y ejecución de recursos sin ocultar los recursos del agente de usuario e incurrir en penalizaciones por retrasos en la obtención de recursos.

Por ejemplo, la aplicación puede usar la palabra clave preload para iniciar una recuperación temprana, de alta prioridad y sin bloqueo de procesamiento de un recurso CSS que luego puede aplicar la aplicación en el momento adecuado:





Aquí hay una mirada realmente detallada sobre W3c: https://w3c.github.io/preload/

Pero si planea usarlo, preste atención a que el soporte del navegador no es tan bueno. El soporte de navegador global está en 82%.

Aquí está la lista completa: http://caniuse.com/#search=preload

Los desarrolladores de Google sugieren rel="preload" que se utilizará para solicitar fuentes antes para tenerlas disponibles cuando el CSSOM esté listo.

La carga diferida de fuentes conlleva una importante implicación oculta que puede retrasar la representación del texto: el navegador debe construir el árbol de representación, que depende de los árboles DOM y CSSOM, antes de saber qué recursos de fuente necesita para representar el texto. Como resultado, las solicitudes de fuentes se retrasan mucho después de otros recursos críticos, y es posible que el navegador no pueda procesar el texto hasta que se obtenga el recurso.

Usar como:



Además, tenga en cuenta:

No todos los navegadores son compatibles , y en esos navegadores, simplemente se ignorarán. Pero todos los navegadores que admiten la precarga también admiten WOFF2, por lo que ese es siempre el formato que debe precargar.

Recuerda difundir esta división si te fue de ayuda.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *