Page Visibility API: Detectar Visibilidad de la Página en JavaScript
Aprende a usar la API Page Visibility para detectar cuándo una página es visible u oculta, pausar operaciones innecesarias y optimizar el rendimiento de tus aplicaciones web.
TL;DR - Resumen rápido
- La API Page Visibility está disponible en document.visibilityState
- document.hidden indica si la página está oculta
- El evento visibilitychange notifica cambios de visibilidad
- Permite pausar operaciones cuando la página no es visible
- Mejora el rendimiento y reduce el consumo de recursos
Introducción a la API Page Visibility
La API Page Visibility permite a las aplicaciones web detectar cuándo una página es visible u oculta para el usuario. Esto es especialmente útil cuando el usuario cambia de pestaña, minimiza el navegador o cambia a otra aplicación. Con esta información, puedes pausar operaciones innecesarias y optimizar el rendimiento de tu aplicación.
La API proporciona dos propiedades principales: document.hidden (un booleano que indica si la página está oculta) y document.visibilityState(una cadena que indica el estado exacto de visibilidad). También emite el eventovisibilitychange cuando cambia el estado de visibilidad.
- Aplicaciones de <strong>streaming de video</strong> para pausar reproducción
- Juegos para <strong>pausar el juego</strong> cuando el usuario cambia de pestaña
- Aplicaciones de <strong>chat</strong> para detener actualizaciones en tiempo real
- Dashboards para <strong>reducir actualizaciones</strong> cuando no son visibles
- Aplicaciones de <strong>animaciones</strong> para detener animaciones complejas
Estados de visibilidad
La propiedad document.visibilityState puede tener tres valores: "visible"(la página es visible), "hidden" (la página está oculta) y"prerender" (la página se está pre-renderizando antes de ser visible).
Detectar Visibilidad de la Página
La forma más simple de detectar la visibilidad de la página es usar las propiedadesdocument.hidden y document.visibilityState. Estas propiedades te permiten conocer el estado actual de visibilidad en cualquier momento.
Verificar Estado de Visibilidad
La propiedad document.hidden es un booleano que es truecuando la página está oculta y false cuando es visible. La propiedaddocument.visibilityState proporciona más información sobre el estado exacto.
Este código muestra cómo verificar el estado de visibilidad de la página. La propiedaddocument.hidden es útil para condiciones simples, mientras quedocument.visibilityState proporciona más detalles sobre el estado exacto.
Usar visibilityState para más detalles
Aunque document.hidden es suficiente para la mayoría de los casos,document.visibilityState proporciona información adicional como el estado"prerender", que indica que la página se está pre-renderizando.
Comparación de Estados de Visibilidad
Es importante entender las diferencias entre document.hidden ydocument.visibilityState. Ambas propiedades proporcionan información sobre la visibilidad, pero visibilityState es más detallada.
Este código muestra cómo comparar ambos estados de visibilidad. La propiedaddocument.hidden es más simple de usar para condiciones booleanas, mientras que document.visibilityState proporciona información más detallada sobre el estado exacto.
Eventos de Cambio de Visibilidad
El evento visibilitychange se dispara cada vez que cambia el estado de visibilidad de la página. Este evento es esencial para reaccionar automáticamente a los cambios de visibilidad y ajustar el comportamiento de tu aplicación en consecuencia.
Usar el Evento visibilitychange
El evento visibilitychange se dispara cuando cambia el estado de visibilidad de la página. Puedes escuchar este evento en el objeto documenty reaccionar a los cambios de visibilidad.
Este código muestra cómo escuchar el evento visibilitychange para reaccionar a los cambios de visibilidad. Cada vez que el usuario cambia de pestaña o minimiza el navegador, el evento se dispara y puedes ajustar el comportamiento de tu aplicación.
Verificar el estado en el evento
Cuando se dispara el evento visibilitychange, siempre verifica el estado actual usando document.hidden o document.visibilityState para saber si la página está visible u oculta. No asumas el estado basándote solo en el evento.
Pausar y Reanudar Operaciones
Uno de los usos más comunes de la API Page Visibility es pausar operaciones cuando la página está oculta y reanudarlas cuando vuelve a ser visible. Esto incluye animaciones, actualizaciones en tiempo real, reproducción de video y más.
Este código muestra cómo pausar y reanudar operaciones según el estado de visibilidad. Cuando la página está oculta, se pausan las animaciones y las actualizaciones en tiempo real. Cuando vuelve a ser visible, se reanudan todas las operaciones.
- <strong>Animaciones</strong>: Pausar animaciones CSS y JavaScript
- <strong>Video/Audio</strong>: Pausar reproducción multimedia
- <strong>Actualizaciones</strong>: Detener polling y actualizaciones en tiempo real
- <strong>Timers</strong>: Cancelar setTimeout y setInterval
- <strong>WebSockets</strong>: Pausar conexiones o reducir mensajes
Usos Prácticos y Optimizaciones
La API Page Visibility tiene muchos usos prácticos para optimizar el rendimiento y la experiencia de usuario. Puedes pausar operaciones innecesarias, reducir el consumo de recursos y mejorar la eficiencia de tu aplicación.
Video y Streaming
Para aplicaciones de video y streaming, la API Page Visibility es esencial para pausar automáticamente la reproducción cuando el usuario cambia de pestaña. Esto ahorra ancho de banda y recursos del servidor.
Este código muestra cómo pausar automáticamente un video cuando la página está oculta. Cuando el usuario cambia de pestaña, el video se pausa automáticamente, ahorrando ancho de banda y recursos. Cuando vuelve a la pestaña, el video se reanuda.
Guardar el progreso del video
Al pausar un video cuando la página está oculta, es buena práctica guardar el progreso actual. Esto permite al usuario continuar desde donde se quedó cuando vuelve a la pestaña, mejorando la experiencia de usuario.
Juegos y Animaciones
Para juegos y aplicaciones con animaciones complejas, la API Page Visibility permite pausar automáticamente el bucle de renderizado cuando la página no es visible. Esto reduce significativamente el consumo de CPU y GPU.
Este código muestra cómo pausar el bucle de renderizado de un juego cuando la página está oculta. El bucle de renderizado consume recursos significativos, por lo que pausarlo cuando no es visible mejora el rendimiento y reduce el consumo de energía.
Detener requestAnimationFrame
Cuando la página está oculta, los navegadores no ejecutan requestAnimationFramecallbacks. Sin embargo, es buena práctica detener explícitamente tu bucle de renderizado para evitar cualquier operación innecesaria.
Chat y Mensajería
Para aplicaciones de chat y mensajería, la API Page Visibility permite detener las actualizaciones en tiempo real cuando la página está oculta. Esto reduce el consumo de recursos del servidor y del cliente.
Este código muestra cómo detener las actualizaciones en tiempo real de un chat cuando la página está oculta. Cuando el usuario cambia de pestaña, se detienen las actualizaciones. Cuando vuelve, se reanudan y se cargan los mensajes nuevos.
Resumen: Page Visibility API
Conceptos principales:
- •document.hidden indica si la página está oculta (true/false)
- •document.visibilityState indica el estado exacto (visible/hidden/prerender)
- •El evento visibilitychange notifica cambios de visibilidad
- •Permite pausar operaciones cuando la página no es visible
- •Mejora el rendimiento y reduce el consumo de recursos
Mejores prácticas:
- •Usa el evento visibilitychange para reaccionar a cambios
- •Pausa animaciones y actualizaciones cuando la página está oculta
- •Reanuda operaciones cuando la página vuelve a ser visible
- •Verifica document.hidden en el evento para saber el estado
- •Usa para video, juegos, chat y cualquier operación intensiva