在选项卡处于后台时使用 d3.js 绘制 SVG答案

【问题标题】：Drawing a SVG with d3.js while tab is in background在选项卡处于后台时使用 d3.js 绘制 SVG
【发布时间】：2018-10-29 09:28:21
【问题描述】：

上下文：我正在开发一个 web 应用程序，它必须显示一些相当复杂且不断更新（每秒多次）的 SVG 图像。更新来自一个单独的服务器，一旦 Web 前端收到更新，SVG 就会更新。 webapp 是用Scala.js 编写的，图像是使用d3js 库创建的（另请参见：scala-js-d3）。我们目前只支持谷歌浏览器。

问题：一旦 web 应用程序在后台选项卡中停留了一段时间，一旦再次导航到整个站点就会变得无响应。根据应用程序在后台运行的时间长短，应用程序有时需要长达 20 秒才能再次响应。有什么办法可以解决吗？

【问题讨论】：

您是使用 setInterval()/setTimout() 作为更新机制还是使用 requestAnimationFrame()？
无意冒犯，但这听起来更像是您的应用程序的设计缺陷。您确定需要在后台进行计算/渲染吗？看看谷歌关于处理后台标签的公告：Background Tabs in Chrome 57。您还可以查看 WebWorkers 或 ServiceWorkers 以将工作卸载到后台处理。
我会在收到更新后立即更新 SVG（由可视化服务器发送）。我既没有使用setInterval()/setTimout() 也没有使用requestAnimationFrame()，但我会调查这些。很确定这是我的应用程序的设计缺陷，因为我对一般的 Web 开发并不熟悉。然而，这个应用程序只能在工业 PC 上运行，而不是连接到互联网（至少目前是这样）。

标签： javascript scala google-chrome web d3.js

【解决方案1】：

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

一旦应用程序在后台选项卡中或最小化（可以使用Page Visibility API 检测到），我只更新我的模型而不绘制任何东西。然后，一旦应用程序再次进入前台，我就重新绘制所有内容。这解决了我所有的性能问题。

【讨论】：

好主意，但是一旦用户切换回来，转换可能看起来很奇怪（也可能会产生误导，因为转换可能在状态 A 和 D 之间，没有状态 B 和 C 之间）。
是的，你是对的。就我而言，这种行为是我可以忍受的。我正在绘制的 SVG 非常复杂且“臃肿”，所以我宁愿在不可见的情况下根本不绘制任何东西。不过，赞成您的答案，因为对于其他情况，您的解决方案可能更有意义。感谢您的意见！

【解决方案2】：

我遇到了同样的问题，我没有在后台选项卡中进行转换。

mbostock 在https://github.com/d3/d3-transition/issues/93#issuecomment-516452828 展示了一个不错的 sn-p 功能

辅助方法…

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

…按以下方式使用：

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

捕获页面可见性事件之后，我们甚至可以调整转换时间，从而缩短转换时间（从而加快转换速度），使其在页面未出现的情况下大约在同一时间结束在后台标签中。

【讨论】：

【解决方案3】：

如果您此时正在使用 setInterval()，浏览器可能会“惩罚”您在非活动浏览器选项卡中运行 setInterval()。

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

【讨论】：

d3.js 过渡已经在使用requestAnimationFrame，请参阅github.com/d3/d3-transition/blob/master/src/transition/… 和github.com/d3/d3-timer