Page Visibility API, Making sure its seen!

The Problem

Recently in one of our applications, we noticed sluggish response times and crashes of a real-time SVG graph. This issue happened only when the graph was running in the background in an inactive tab of the browser window and then when brought back to front after a considerable amount of time.

During the search for a solution, we came across the following.

http://stackoverflow.com/questions/13408597/chrome-tab-crashing-hanging-after-brought-on-foreground-being-long-time-on-bac

Though the problem was clear to us that the browser suspended all rendering and immediately when switching tabs queued rendering operations took a toll on the browser window making it to crash.
Since there were multiple timers running in the background to render the chart, we planned on suspending the timers which render the graph when the tab is inactive thus allowing less resource usage when resuming.

In order to do this we made use of the Page Visibility API which is an HTML5 feature introduced into browsers. By consuming the Page Visibility API we made sure that the graph is rendered only when the browser tab is active and when the page is visible to the user.

Looking into the Page Visibility API

The page visibility API supports the following functionality.

  • document.hidden

Document.hidden maintains the state whether the page is

  • document.visibilityState

Returns a string denoting the visibility state of the document. Possible values:

visible :This means that the page is the foreground tab of a non-minimized window.

hidden : the page content is not visible to the user. The document is either a background tab or part of a minimized window, or the OS screen lock is active.

prerender : the page content is being prerendered and is not visible to the user (considered hidden for purposes of document.hidden). The document may start in this state, but will never transition to it from another value. Note: browser support is optional.

unloaded : the page is being unloaded from memory. Note: browser support is optional.

  • Events – visibilitychange

A simple event, fired at the document object immediately after document.visibilityState transitions between visibility states.

Note that visibility has nothing to do with whether the document’s contents have fully loaded, which implies that for any given visibility transition event, onload may or may not have already fired. In addition, visibilitychange will not fire at all if the page is opened in the foreground and is not prerendered.

Browser Compatibility

Browser Version
Chrome 13
33
Firefox 10
18
Internet Explorer 10
Opera 12.10
Safari (Webkit) 7

Other Usages

  • Pausing a video/carousel when the user switches a tab.
    Example application
  • Eliminating resource consuming background operations, when the user is not interacting with the web page.

References

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s