Chrome - 返回我的网页，标签变为空白

Question

我们是通过 websocket 以网格图像方式流式传输视频。我们将接收到的图像渲染到画布中，并且画布将每秒更新多次。当我们移动到不同的选项卡或应用程序并返回到我们的页面时，页面会空白几秒钟，比如 10-20 秒。有时它需要更多的时间。其余 chrome tabs 正常。

Answer 1

在我们的页面中，画布渲染甚至在后台继续进行。 When a tab is not visible, chrome throttles the UI changes for saving battery and performance. 当返回到同一个选项卡时，所有的渲染都被一次性推送，导致页面空白且无响应。

我们引入了浏览器的window.requestAnimationFrame api，解决了这个问题。 requestAnimationFrame 在 tab 变为不可见时停止渲染功能，并在返回同一 tab 时恢复。

我们改变了：

   render();

到

requestAnimationFrame(render);

check this answer for further understanding

回答自己的问题，因为这可能对某人有所帮助。