Рисование SVG с d3.js, когда вкладка находится в фоновом режиме

Question

Контекст : я работаю над веб-приложением, которое должно отображать некоторые довольно сложные и постоянно обновляемые (несколько раз в секунду) изображения SVG. Обновления происходят с отдельного сервера, и SVG обновляется, как только веб-интерфейс получает обновление. Веб-приложение написано в Scala.js , а изображение создано с использованием библиотеки d3js (см. Также: scala-js-d3 ). В настоящее время мы поддерживаем только Google Chrome.

Проблема : После того, как веб-приложение какое-то время находилось на фоновой вкладке, весь сайт перестает отвечать после повторного перехода. В зависимости от того, как долго приложение находилось в фоновом режиме, приложение может снова реагировать на реакцию до 20 секунд. Есть ли способ, которым я могу решить это?

Answer 1

Лучшее для меня решение - довольно простое:

Как только приложение находится на фоновой вкладке или свернуто (может быть обнаружено с помощью API видимости страницы ), я только обновляю свою модель, ничего не рисуя. Затем, как только приложение снова выходит на передний план, я все перерисовываю. Это исправило все мои проблемы с производительностью.

Answer 2

Я столкнулся с той же проблемой, с которой я обходился, не делая переходы в фоновых вкладках.

mbostock показывает хороший фрагмент для этого на https://github.com/d3/d3-transition/issues/93#issuecomment-516452828

Вспомогательный метод ...

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

… для использования следующим образом:

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

Захватывая события видимости страницы, можно даже адаптировать время перехода таким образом, чтобы время перехода уменьшилось (таким образом, переход ускорился) таким образом, чтобы оно заканчивалось примерно в то же время, если страница не была в фоновой вкладке.

Answer 3

Если вы используете setInterval (), в данный момент браузер может «наказать вас» за запуск setInterval () в неактивной вкладке браузера.

Это можно исправить с помощью requestAnimationFrame () или путем отслеживания видимости вкладки и только с помощью setInterval (), когда вкладка активна.