Es posible que una página que se deja abierta en una pestaña en segundo plano no necesite seguir animando o actualizando datos no críticos. El evento de cambio de visibilidad permite a una aplicación pausar el trabajo opcional cuando el documento está oculto y reanudarlo cuando esté visible.

function updateActivity() {
  if (document.hidden) {
    stopOptionalPolling();
    return;
  }
  refreshVisibleData();
}

document.addEventListener("visibilitychange", updateActivity);
updateActivity();

Pausa solo el trabajo que pueda esperar con seguridad

  • Mantenga confiables la persistencia esencial y las operaciones activadas por el usuario independientemente de la visibilidad de las pestañas.
  • Reanude con una nueva verificación de estado en lugar de asumir que se ejecutó cada temporizador perdido.
  • Elimine el detector de eventos cuando se elimine el controlador a nivel de página.

Los temporizadores en segundo plano ya están acelerados de manera diferente en todos los navegadores. Trate la visibilidad como una señal para reducir el trabajo opcional, no como un mecanismo de programación preciso.

Pruebe cambiando de pestaña y regresando después de un retraso. La interfaz debe actualizarse desde el estado actual sin duplicar una solicitud ni perder la entrada del usuario.