使用Tab在后台时使用d3.js绘制SVG

Question

上下文：我正在开发一个Web应用程序，该应用程序必须显示一些相当复杂且不断更新（每秒多次）的SVG图像。该更新来自单独的服务器，并且只要Web前端收到更新，SVG便会更新。该Web应用程序是用docs编写的，并且图像是使用Scala.js库创建的（另请参见：d3js）。我们目前仅支持Google Chrome。

问题：该Web应用程序进入后台标签一段时间后，一旦再次导航到整个网站，该站点将无响应。根据应用程序在后台运行的时间长短，有时可能需要20秒才能使应用程序再次响应。有什么办法可以解决这个问题？

Answer 1

我遇到了同样的问题，我没有在后台标签中进行过渡。

mbostock在https://github.com/d3/d3-transition/issues/93#issuecomment-516452828上显示了一个不错的摘要

Helper方法...

d3.selection.prototype.maybeTransition = function(duration) {
  return duration > 0 ? this.transition().duration(duration) : this;
};

…将通过以下方式使用：

selection
  .maybeTransition(document.visibilityState === "visible" ? my_duration : 0)
    .attr(…

捕获页面可见性事件甚至可以以这样的方式适应过渡时间：减少过渡时间（从而加快过渡速度），使得过渡时间大约在没有页面的同时结束在后台标签中。

Answer 2

如果您当前正在使用setInterval（），浏览器可能会“惩罚”您在不活动的浏览器选项卡中运行setInterval（）。

您可以通过使用requestAnimationFrame（）或监视选项卡的可见性并仅在选项卡处于活动状态时使用setInterval（）来解决此问题。

Answer 3

最适合我的解决方案是一个非常简单的解决方案：

一旦应用程序位于背景标签中或最小化（可以使用Page Visibility API进行检测），我只会更新模型而不会绘制任何内容。然后，一旦应用程序再次置于前台，我将重新绘制所有内容。这解决了我所有的性能问题。