A page left open in a background tab may not need to keep animating or refreshing non-critical data. The visibilitychange event lets an application pause optional work when the document is hidden and resume it when visible.
function updateActivity() {
if (document.hidden) {
stopOptionalPolling();
return;
}
refreshVisibleData();
}
document.addEventListener("visibilitychange", updateActivity);
updateActivity();Pause only work that can safely wait
- Keep essential persistence and user-triggered operations reliable regardless of tab visibility.
- Resume with a fresh state check instead of assuming every missed timer ran.
- Remove the event listener when the page-level controller is disposed.
Background timers are already throttled differently across browsers. Treat visibility as a signal to reduce optional work, not as a precise scheduling mechanism.
Test by switching tabs and returning after a delay. The interface should refresh from current state without duplicating a request or losing user input.
