We're live-coding on Twitch! Join us!
Get to Know the Page Visibility API

Get to Know the Page Visibility API

Almost everybody who uses chrome has said this statement, "chrome uses a lot of memory". Take me for example, I love to open a lot of tabs, some I keep pinned for a long time. This behaviour makes me sometimes experience breaks and tiny glitches.

This happens because many websites consume lots of browser resources, for example, imagine you have 5 tabs opened (just five). In those tabs, one is running an expensive canvas animation, another is making a lot of calls to the server (polling). These actions need computer memory to function. What if we as developers could help reduce the stress on the users computer.

What if we could pause some parts of our websites when a user isn't looking at it?

For a while, we had been missing a simple but useful feature in the browser. For a time, we used a vendor prefixed version of the API — but due to the standardization of HTML5 on 28 October 2014, we got that feature. This mystery API is the Visibility API.

What is Page Visibility API

The visibility API allows a developer to know when a page has lost or gained focus. The API sends a visibilitychange event of the visibility of the page.

The API is particularly useful for saving browser resources by giving developers the opportunity to not perform unnecessary tasks when the webpage is not visible.

Before this API became official, developers had to detect this feature by adding a blur or focus event on the window.

Usage of the Page Visibility API

The visibility API can help developers with a lot of things. It is most suitable for saving browser resources. So it can be used for things like.

  • Pausing a video when the page has lost user focus.
  • Stop an HTML5 canvas animation from running when a user is not on the page.
  • Show a notification to the user only when the page is active.
  • Stop movement of a slider carousel when the page has lost focus.

Using the Page Visibility API

The API adds two properties to the browser's document object, the first is hidden which is a boolean. The second one is visibilityState which is a string.

We can listen for the visibilitychange event. For example, when a page loses focus, we can stop running an action.

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        // stop running expensive task
    } else {
        // page has focus, begin running task

The visibilityState property offers four different values. Each representing a different browser tab state. It is read-only which means it cannot be edited.

  • visible: means the tab is visible or has focus.
  • prerender: the page has loaded but the user has not viewed it.
  • hidden: page is not visible on any screen.
  • unloaded: means the user is about to close the current page.

For example, we could create a newsletter signup form that pops up as soon as the user is about to leave the page. If you use WordPress, you should be familiar with Optin-Monster. They use the same technology to show a newsletter signup form when a user wants leave the page.

document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'unloaded') {

Browser Support

Thanks to our lovely friends at CanIUse, we can see that the API support for all the major browsers today. Even IE has support from version 11. Page Visibility browser support chart Browser support as of May 2016


Building a good web application doesn't always have the most eye-catchy feature, it is about performance. Not giving the user a reason to close your website is one of the greatest accomplishments of web development.

Need more info on Page Visibility API, checkout Mozilla Developer Network.

Like this article? Follow @KayandraJT on Twitter