Senior LevelHTML & Semantic Web
How does the Page Lifecycle API manage browser state transitions (Active, Passive, Hidden, Frozen)?
❓ Interview Prompt: Explain Page Lifecycle API states (Active, Passive, Hidden, Terminated, Frozen, Discarded) and visibilitychange listeners.
Modern browsers freeze or discard background tabs to preserve battery and memory. The Page Lifecycle API exposes lifecycle state transitions:
States & Events:
•
'visibilitychange': Fires when tab becomes 'hidden' or 'visible'.
•
'freeze': Fires when browser pauses execution.
•
'resume': Fires when user returns to a frozen tab.
Code Implementation Example
javascript
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
// Save unsaved state to localStorage & pause heavy network polling
saveAppState();
}
});💡Pausing network activity and saving state on visibilitychange hidden event.
🎯 Interview Key Takeaway
Listen to document visibilitychange events to save app state and pause background polling when tabs become hidden.
#Page Lifecycle#visibilitychange#State Management#Senior
Back to all HTML & Semantic Web Questions→