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.
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 maintains the state whether the page is
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.
- Pausing a video/carousel when the user switches a tab.
- Eliminating resource consuming background operations, when the user is not interacting with the web page.