Skip to main content
Compatibilidad con representación previa y captura previa

Usa representación previa y captura previa en Internet Explorer 11 para mejorar la navegación del sitio web. Representación previa (también denominada carga previa) especifica una página web que se carga (representa) en segundo plano mientras el usuario lee la página actual y la captura previa identifica los recursos que se van a descargar en segundo plano. Dado que ambas características descargan contenido antes de que sea necesario, los recursos están disponibles de inmediato cuando los necesita el usuario.

Aquí aprenderás a usar los elementos link para representar previamente las páginas web y capturar previamente los recursos en segundo plano.

Mejorar el rendimiento obteniendo elementos de antemano

Mientras un usuario lee una página web con IE11, el explorador puede cargar y representar contenido adicional en segundo plano. Como desarrollador web, puedes identificar la página web y los recursos que probablemente el usuario va a necesitar a continuación De este modo, mejora el rendimiento percibido del sitio web, ya que el contenido está listo y puede mostrarse con mayor rapidez.

Imagina que estás escribiendo un artículo que se divide en páginas web independientes. Mientras el usuario lee cada una de las páginas, puedes realizar una carga previa de la siguiente para que se muestre cuando el usuario quiera leerla. O bien, si has creado un sitio que contiene varios artículos, puedes usar la página principal para descargar hojas de estilos, imágenes y otros recursos usados en cada una de las páginas para que cada artículo se cargue con mayor rapidez.

Puedes usar el elemento link para llevarlo a cabo. A partir de IE11, se admiten los siguientes valores para el atributo rel:

ValorDescripción y ejemplo
prerender

Identifica una página web que se cargará en segundo plano, en caso de que el usuario quiera navegar a ella a continuación.

Ejemplo:


<link rel="prerender" href="http://example.com/nextpage.html" />

IE11 realiza la representación previa de una página en segundo plano. Si se recibe una segunda solicitud de representación previa, esta reemplaza la primera solicitud. Las demás solicitudes de representación previa se omiten.

prefetch

Identifica un archivo de recursos, como una imagen o una hoja de estilos CSS, que se descargará en la memoria caché.

Ejemplo:


<link rel="prefetch" href="http://example.com/style.css" />

IE11 admite hasta diez (10) solicitudes de captura previa. Las demás solicitudes se omiten.

dns-prefetch

Identifica una consulta DNS para resolver el segundo plano, de modo que las solicitudes se puedan producir con mayor rapidez.

Ejemplo:


<link rel="dns-prefetch" href="http://example.com/"/>

 

Nota  Internet Explorer también admite los valores "next" y "prev" para el atributo rel. Para obtener más información, consulta Determinación de destinos de Pasar de página.
 

Estos valores de elementos link solo son compatibles con los documentos de nivel superior; se omiten cuando se aplican a documentos ( iframe) secundarios.

Las direcciones URL de destino deben hacer referencia a nombres de archivo individuales (relativos o completos). No se admiten los caracteres comodín.

Carga eficaz de recursos en segundo plano

Cuando se usa el elemento link para realizar una carga previa de una página web, IE11 carga y representa la página en el fondo.

Cargar una página web en segundo plano no reduce el tiempo necesario para cargar la página. La página necesita el mismo número de solicitudes de red, tanto si se carga en primer plano como en segundo plano.

La diferencia está en la perspectiva del usuario. Debido a que las páginas representadas previamente se cargan y se representan en segundo plano, se muestran inmediatamente cuando el usuario hace clic en el vínculo. Dado que los usuarios no ven el proceso de carga de la página, tienen la sensación de que esta se muestra más rápidamente.

La representación previa requiere estas condiciones:

  • Si el usuario está en una red de uso medido, la capacidad para representar previamente las páginas web dependerá del plan de uso de datos del dispositivo que se utilice para ver la página.
  • La dirección URL de destino no puede ser una descarga de archivo.
  • La dirección URL de destino usa los protocolos "http://" o "https://".
  • La dirección URL de destino es un documento de nivel superior; es decir, no puede ser un documento iframe.
  • Solo puede representarse una página web al mismo tiempo.
  • El documento que contiene el elemento link está visible, es decir, se carga en la pestaña en primer plano y no se minimiza.

Las páginas no pueden representarse completamente en segundo plano si se cumple alguna de estas condiciones:

  • La página de destino activa un cambio en la interfaz de usuario, como por ejemplo, un cuadro alert, una llamada a window.open o una notificación de seguridad.
  • La página de destino reproduce automáticamente un archivo multimedia con el elemento video o audio.
  • La página de destino modifica travel log.
  • La ventana de las herramientas de F12 está abierta.

En estos casos, la página de destino se pone en pausa mientras se encuentra en segundo plano. Cuando el usuario elige la página de destino, se muestra y se reanuda la representación desde el punto donde se puso en pausa.

Las páginas representadas previamente no siempre se muestran al usuario. Estas condiciones hacen que las páginas representadas previamente se descarten de la memoria sin que lleguen a mostrarse:

  • El usuario no abre la página de destino durante cinco minutos.
  • El usuario abre otra página.
  • El usuario cambia a otra pestaña o instancia del explorador.
  • Un proceso de JavaScript agrega un nuevo elemento link que solicita la representación previa de una página web diferente.
  • Se produce un error al cargar la página de destino, incluidos los códigos de error HTTP 500 (error de servidor), 404 (recurso no encontrado) o errores relacionados (por ejemplo, problemas de conexión).

Cuando se descarta una página representada previamente y se solicita más tarde, se carga directamente desde el servidor de hospedaje. Si la página todavía se encuentra en la memoria caché del explorador, podría cargarse con mayor rapidez; sin embargo, no hay garantías de que esto ocurra.

Al cargar una página en segundo plano pueden producirse algunos efectos secundarios. Concretamente, en la ejecución de actividades durante un evento load, podría ocurrir lo siguiente:

  • Los controles Microsoft ActiveX no se cargan hasta que el usuario muestra la página. Usa la propiedad readyState para comprobar que los objetos están disponibles antes de confiar en ellos en JavaScript.

  • Es posible que algunas animaciones no se muestren cuando se visualice la página. Es probable que esto suceda porque ya se han ejecutado mientras se cargaba la página en segundo plano.

  • Los temporizadores pueden producir resultados inesperados.

  • Se conservan las cookies, el contenido almacenado en caché y los cambios realizados por operaciones asincrónicas (como IndexedDB y almacenamiento web).

Si te encuentras con este u otros efectos secundarios relacionados, usa la API de visibilidad de página para determinar cuándo está visible la página. Por ejemplo, las animaciones deben demorarse hasta que la página sea visible. Consulta el tema sobre el uso eficaz de la representación y la captura previas para obtener más información.

Especificación

HTML5: sección 4.12.5.9