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

Question

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

Answer 1

在我们的页面中，画布渲染甚至在后台继续进行。当不可见一个选项卡时，Chrome会防止UI更改以节省电池和性能。当返回到同一个选项卡时，所有渲染都会立即推送，这会使页面空白且无响应。

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

我们从：

   render();

至

requestAnimationFrame(render);

检查此答案以进一步了解

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