With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. The Page Visibility API provides events you can watch for to know when a document becomes visible or hidden, as well as features to look at the current visibility state of the page. The Page Visibility API is especially useful for saving resources and improving performance by letting a page avoid performing unnecessary tasks when the document isn't visible. Notes: When the user minimizes the window or switches to another tab, the API sends a event to let listeners know the state of the page has changed. You can detect the event and perform some actions or behave differently. visibilitychange For example, if your web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab. The user doesn't lose their place in the video, the video's soundtrack doesn't interfere with audio in the new foreground tab, and the user doesn't miss any of the video in the meantime. Visibility states of an are the same as the parent document. Hiding an using CSS properties (such as ) doesn't trigger visibility events or change the state of the document contained within the frame. <iframe> <iframe> display: none; Let's consider a few use cases for the Page Visibility API. Use cases A site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page An application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible A page wants to detect when it is being prerendered so it can keep accurate count of page views A site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) Developers have historically used imperfect proxies to detect this. For example, watching for and events on the window helps you know when your page is not the active page, but it does not tell you that your page is actually hidden to the user. The Page Visibility API addresses this. blur focus While and will tell you if the user switches windows, it doesn't necessarily mean it's hidden. Pages only become hidden when the user switches tabs or minimizes the browser window containing the tab. Note: onblur onfocus Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include: Policies in place to aid background page performance Most browsers stop sending callbacks to background tabs or hidden s in order to improve performance and battery life. requestAnimationFrame() <iframe> Timers such as are throttled in background/inactive tabs to help improve performance. See for more details. setTimeout() Reasons for delays longer than specified Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows: In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds. Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see ). In Chrome, this value is 10 seconds. Reasons for delays longer than specified Timer tasks are only permitted when the budget is non-negative. Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget. The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome. Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden. Tabs which are playing audio are considered foreground and aren’t throttled. Tabs running code that's using real-time network connections ( and ) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed. WebSockets WebRTC processes are also left unthrottled in order to avoid timeouts. IndexedDB Example View (video with sound). live example The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code: hidden, visibilityChange; ( .hidden !== ) { hidden = ;
  visibilityChange = ;
} ( .msHidden !== ) {
  hidden = ;
  visibilityChange = ;
} ( .webkitHidden !== ) {
  hidden = ;
  visibilityChange = ;
} videoElement = .getElementById( ); { ( [hidden]) {
    videoElement.pause();
  } {
    videoElement.play();
  }
} ( .addEventListener === || hidden === ) { .log( );
} { .addEventListener(visibilityChange, handleVisibilityChange, ); videoElement.addEventListener( , { .title = ;
  }, ); videoElement.addEventListener( , { .title = ; 
  }, );

} // Set the name of the hidden property and the change event for visibility var if typeof document "undefined" // Opera 12.10 and Firefox 18 and later support "hidden" "visibilitychange" else if typeof document "undefined" "msHidden" "msvisibilitychange" else if typeof document "undefined" "webkitHidden" "webkitvisibilitychange" var document "videoElement" // If the page is hidden, pause the video; // if the page is shown, play the video ( ) function handleVisibilityChange if document else // Warn if the browser doesn't support addEventListener or the Page Visibility API if typeof document "undefined" undefined console "This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API." else // Handle page visibility change document false // When the video pauses, set the title. // This shows the paused "pause" ( ) function document 'Paused' false // When the video plays, set the title. "play" ( ) function document 'Playing' false Properties added to the Document interface The Page Visibility API adds the following properties to the interface: Document Document.hidden Returns if the page is in a state considered to be hidden to the user, and otherwise. true false Document.visibilityState A indicating the document's current visibility state. Possible values are: DOMString visible The page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window. hidden The page's content is not visible to the user, either due to the document's tab being in the background or part of a window that is minimized, or because the device's screen is off. prerender The page's content is being prerendered and is not visible to the user. A document may start in the state, but will never switch to this state from any other state, since a document can only prerender once. prerender Not all browsers support prerendering. Note: unloaded The page is in the process of being unloaded from memory. Not all browsers support the unloaded value. Note: Document.onvisibilitychange An providing the code to be called when the event is fired. EventListener visibilitychange Specifications Browser compatibility Document.visibilityState See also Description of the on the IEBlog. Page Visibility API Description of the by Google Page Visibility API Credits Source: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API Published under licence Open CC Attribution ShareAlike 3.0

Google

Mozilla

Page Visibility API: Learn How to Use Browser-Based Visibility Interface

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps