link etiqueta html5 preload

etiqueta - ¿Cómo puedo precargar una página usando HTML5?



preload jquery (5)

Recuerdo haber leído sobre una etiqueta meta que hace que el navegador cargue una página. ¿Cuál es la etiqueta de nuevo?

Algunos agentes de usuario pueden optar por precargar cuando está presente, pero no puede apostar en ello.

<link rel="next" href="http://www.example.com/link-reference">

Hay un par de maneras en que puedes precargar una página:

  • La búsqueda previa de DNS le dice al navegador que algunos de los recursos de otro dominio serían necesarios, por lo que puede resolver el DNS lo más rápido posible. Para hacer esto, debe agregar <link rel="dns-prefetch" href="//example.com"> en el documento. Esto puede ser útil si necesita utilizar elementos de terceros.
  • Preconnect lleva un paso más allá y no solo resuelve el DNS, sino que también hace un protocolo de enlace TCP y, si se preconecta a https, se realizará una negociación TLS. En el encabezado debe agregar <link rel="preconnect" href="https://example.com/">
  • Prefetch descarga el recurso y lo almacena en el caché del navegador para usarlo más tarde. Puede hacer <link rel="prefetch" href="imgs/image.png"> . Tenga en cuenta que esto depende del navegador para decidir si tiene sentido descargar el recurso (podría ignorarlo)
  • caniuse es la opción más poderosa. Le dice al navegador que solicite la url y descargue todos los recursos. <link rel="prerender" href="http://example.com/page"> . Debería estar bastante seguro de que la persona abrirá la página, de lo contrario simplemente perderá su ancho de banda.

La captación previa se incluye en una especificación W3C bajo el nombre Sugerencias de recursos . Se implementa en Firefox, Chrome, IE 11, Edge, Opera después de 12.1 y en el navegador de Android desde 4.4.4, consulte la página de búsqueda previa de Caniuse para obtener más información y detalles actualizados.

También vea las páginas de Caniuse y de especificaciones para tecnologías relacionadas (los navegadores compatibles posteriormente se recuperan de Caniuse y se actualizan a partir de septiembre de 2015):

  • caniuse / spec (IE 11, Edge, Chrome, Opera)
  • caniuse / spec (Firefox, Chrome 46, Opera 33)
  • caniuse DNS: caniuse / spec (IE9 ( ver nota más abajo ), IE10, todos los demás navegadores excepto Opera Mini y quizás iOS Safari y el navegador de Android)

IE 9 implementó la búsqueda previa de DNS solo, pero lo llamó "prefetch" (¡precaución!). Chrome durante un tiempo (al menos hasta 2013) solo realizó la representación previa y la búsqueda previa de DNS. IE11 implementa lazyload , para imágenes; Microsoft ha intentado conseguirlo en la especificación, pero hasta ahora no lo es. Se afirma que iCab fue el primer navegador en implementar la captación previa, aunque este comportamiento fue automático, no controlado por el marcado.

Antecedentes históricos

Mozilla Application Suite, y más tarde, Firefox, implementan la especificación (la especificación se basa realmente en la implementación previa de Mozilla de captación previa, que se basó en algo en el encabezado Link: especificado en RFC 2068, que ahora ha sido superado por RFC 2616 [que sí no haga referencia al Link: encabezado]. Consulte esta versión anterior de los documentos ( 🕔 ) para obtener más detalles.) Según la documentación en MDN ( 🕔 ):

La captura previa de enlaces es un mecanismo de navegador, que utiliza el tiempo de inactividad del navegador para descargar o recuperar documentos que el usuario podría visitar en un futuro próximo.

El navegador busca un HTML <link> o un Link: HTTP Link: encabezado con un tipo de relación de next o prefetch .

Así que la sintaxis es:

<link rel="prefetch" href="/path/to/prefetch" />

También puede utilizar el Link: encabezado HTTP:

Link: </page/to/prefetch>; rel=prefetch

O una <meta> para simular ese mismo encabezado HTTP:

<meta http-equiv="Link" content="&lt;/page/to/prefetch&gt;; rel=prefetch">

Tenga en cuenta que la next relación también se puede usar, pero su función principal es indicar la página "siguiente" en la navegación, por lo que no debe usarla para recursos o información no relacionada. La captación previa también se realiza en conexiones HTTPS.

iCab

Parece que iCab ( 🕔 ) implementó una 🕔 temprana alrededor de 2001. Al parecer, iCab prefiguó todos los enlaces a páginas de contenido (no recursos), sin seguir ninguna pista que el desarrollador hubiera dejado en el marcado.

La prodeterminación de los activos es una de las tareas más difíciles y simples en un proyecto FLASH o HTML5 porque hemos realizado proyectos de conversión de FLASH a HTML5.

Los tipos de preloaders más fáciles son los preloaders estáticos utilizados para cargar la película en la que existen. Para estos precargadores, todo lo que debe hacer es detener la película en una pantalla de precargador, generalmente el primer fotograma de la película, y mantenerla allí hasta que pueda determinar que la película se ha cargado completamente en el reproductor Flash.

El Precargador también detiene cualquier parpadeo o retraso al cambiar las imágenes no almacenadas en una página web, ya que la misma imagen debe descargarse del servidor cada vez que se necesita mostrarla.

Hemos utilizado jQuery HMTL5 Loader en nuestras aplicaciones web (HTML5), puede ver el Github Repo aquí.

Este complemento necesita un archivo JSON para obtener los archivos que tiene que precargar, y puede precargar imágenes, fuentes de audio y video html5, secuencias de comandos y archivos de texto. Además de esto, tiene un tipo diferente de cargadores (circular, línea, contador grande, etc.) y características adicionales, etc.

Se implementa así.

<script> var loaderAnimation = $("#html5Loader").LoaderAnimation(); $.html5Loader({getFilesToLoadJSON:''json file'', onUpdate: loaderAnimation.update, debugMode:false }); </script>

Funciona perfectamente en diferentes navegadores, incluidos Chrome, FireFox, Safari, Opera, etc. y en navegadores móviles.

Nota: Lo hemos utilizado para nuestras aplicaciones web HTML5 que se ejecutan en diferentes plataformas, incluidas Android y iOS.

Puede que esta no sea una buena respuesta a la pregunta, pero solo para la información, InstantClick.js puede cargar sus enlaces antes de que realmente haga clic en ella.

Como funciona

Antes de que los visitantes hagan clic en un enlace, se desplazan sobre ese enlace. Entre estos dos eventos, por lo general pasan de 200 ms a 300 ms. InstantClick utiliza ese tiempo para precargar la página, de modo que la página ya está allí cuando haces clic.