Chrome -返回到我的网页，选项卡变为空白

Question

我们通过websocket以网格图像的方式流式传输视频。我们将接收到的图像渲染到画布中，画布将在一秒钟内多次更新。当我们移动到不同的选项卡或应用程序并返回到我们的页面时，页面会变成空白几秒钟，比如10-20秒。有时甚至需要更多的时间。Rest其他铬标签是正常的。

Answer 1

在我们的页面中，画布渲染即使在后台也会继续。当选项卡不可见时，chrome会限制UI更改以节省电池和性能。当返回到相同的选项卡时，所有的渲染都会立即被推送，这会使页面变得空白且无响应。

我们引入了浏览器的window.requestAnimationFrame接口，解决了这个问题。一旦选项卡不可见，requestAnimationFrame将停止渲染功能，并在返回到同一选项卡时恢复。

我们从以下位置更改：

   render();

至

requestAnimationFrame(render);

check this answer for further understanding

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