Хромированная вкладка сбой/зависание после появления на переднем плане долгого времени на фоне

У меня есть страница, показывающая статистику в реальном времени. Он запускает много javascript, делает много HTTP-запросов, каждые 5 секунд отображает графики SVG с использованием D3.js, имеет множество анимаций CSS и часто меняет частоту DOM.

Пока страница сфокусирована, она работает гладко. Если я переключусь на другую вкладку и вернусь позже, часто бывает короткая пауза, где страница, кажется, замерзает, прежде чем представление внезапно кажется перерегистратором, и страница снова станет пригодной для использования. Чем длиннее вкладка, тем длиннее эта пауза. Если вкладка была в фоновом режиме очень долго (часы), и я вернусь к ней, она будет заморожена в течение долгого времени, а затем сработает.

Все эти поведения наблюдаются в Chrome. Я не много тестировал в других браузерах.

Что не делает Chrome, когда вкладка находится в фоновом режиме, и что она делает во время этой паузы, когда я сначала вернусь к вкладке?

UPDATE:

Я также делаю анимацию jQuery. Этот ответ и этот может иметь значение.

В соответствии с этим первым ответом:

"Неактивные вкладки браузера блокируют некоторые функции setInterval или setTimeout."

stop (true, true) остановит все буферизованные события и немедленно выполнит только последнюю анимацию.

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

Ответ 1

У нас была аналогичная проблема с SVG-графиками и удалось решить ее с помощью API видимости страницы, представленного с помощью HTML5. Если кто-то наткнется на такой вопрос, обратитесь к следующей статье Использование API видимости страницы

Нам удалось приостановить все действия рендеринга SVG, когда окно браузера не видно. Это удалось остановить вкладку от сбоев.

Ответ 2

Да, это типичное поведение браузера Chrome.

Я предполагаю, что, когда ваша вкладка находится в фоновом режиме, Chrome помещает все данные вкладки на "заднюю полку", чтобы очистить "переднюю полку", которая работает намного быстрее. Я знаю, это звучит непрофессионально, но я надеюсь, что вы поняли.

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

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