Chrome - returning to my webpage, tab goes blank

Question

We are stream video via websocket in a grid image approach. We render the received images into a canvas and canvas will be updated multiple times a second. When we move to a different tab or application and return to our page, the page goes blank for few seconds say 10-20 seconds. Sometimes it takes even more time. Rest other chrome tabs are normal.

Answer 1

In our page, canvas rendering continued even in the background. When a tab is not visible, chrome throttles the UI changes for saving battery and performance. When the returning to the same tab, all rendering is pushed at once and it made the page blank and unresponsive.

We introduced window.requestAnimationFrame api of browser, which solved the problem. requestAnimationFrame stops the rendering function once the tab becomes invisible and resumes when returning to the same tab.

We changed from:

   render();

to

requestAnimationFrame(render);

check this answer for further understanding

Answering own question as this might help someone.