Как узнать, когда браузер перестает перерисовывать слои/узлы DOM, потому что они скрыты?

Question

Идентификация: Я изучаю все возможные решения для обнаружения, когда падение FPS или перепроверки/перестановки прекращаются в браузере из-за оптимизации браузера, поскольку область документа выходит из поля зрения.

Наблюдение: До сих пор самый родной HTML/решения JS Я исследуемые не учитывают часть DOM, который был закрыт другими частями страницы или DOM, который находится ниже сгиба. Хотя иногда контент будет непосредственно встроен в родительский документ, в других случаях он может быть в фрейме или iframe.

Тестовые результаты: mozPaintCount является точным представлением йот перекомпоновке для окна, и реагирует правильно, когда окно или документ в кадре затемняется. Также кажется, что Firefox правильно идентифицирует части dom и не перерисовывает их, когда они скрыты, которые могут быть визуально проверены с помощью инструмента инспекторов firefox, когда что-то не видно, однако инспектор не может учитывать иерархию представлений при рисовании основные моменты перекрашенных регионов. Престижность вам, Mozilla!

Ссылка: mozPaintCount

Вспышка также показывает замедление FPS, когда он выключен экран и новейший Flash Player 11.2 имеет специальный случай, который срабатывает, когда он был задушили браузер по причинам оптимизации. Flash также не является надежным решением, поскольку он по умолчанию отключен в нескольких браузерах.

Ссылка: Flash Player 11.2 Throttle Events

Текущая реализация браузера события страницы изменения видимости способна вещание, когда окно было изменено на другую вкладку или окно становится неактивным, но не принимает во внимание позиции прокрутки для элементов/windows/документы ниже складок или закрыты другим dom. Однако во втором проекте этой спецификации браузеру было предложено учитывать иерархию видового экрана и DOM для получения более точных результатов.

Ссылки: Recommendation Page Visibility, 2011 и Draft Page Visibility 2, 2013

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

requestAnimationFrame представляется для дроссельной анимации только при изменении вкладок, а окно браузера становится размытым, но не обрабатывает содержимое под сгибом. Кроме того, поскольку raf привязан только к уровню окна, он не может быть привязан к конкретным dom-узлам (что, похоже, близоруко при его реализации).

Ссылка: requestAnimationFrame

Я еще не закончил тестирование WebGL, однако, что будет ограничена небольшим числом современных браузеров (приемлемого результата данной вспышки решений для старых браузеров).

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

Я даже не начал думать о внедренных объектах и ​​о том, что они могут обеспечить.

Я не рассматривал элементы управления ActiveX, чтобы увидеть, есть ли что-нибудь, что может помочь.

Я не смотрел видео HTML5.

Анимированные GIF-файлы, как представляется, оптимизированы только в Firefox. Престижность снова, Mozilla!

Итак, тайна и магия того, как каждый поставщик браузера оптимизирует рендеринг страниц, продолжает задушить мои успехи. Однако на элементную позицию нельзя полагаться только на истинное указание того, действительно ли элемент просматривается или нет, поскольку на странице могут быть другие слои, которые скрывают рамку содержимого, или контент может отображаться таким образом, который исключает какой-либо значимо видимый рендеринг (например, изменение 3D-поворота содержимого, чтобы оно не было видно.)

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

Аналогичным образом, here is an older SO question, который частично охватывает этот вопрос.

Answer 1

Я использовал Mozoz mozPaintCount в следующем коде, но я не получаю значение FPS, которое я ожидал бы.

Часть 1: запустите этот код один раз, чтобы заполнить переменные.

var currentFrames = window.mozPaintCount, currentTime = new Date(); 

Часть 2: запустить этот код в любое время после того, как часть 1.

(window.mozPaintCount - currentFrames)/((new Date() - currentTime)/1000) 

Результат показывает FPS, для моего сайта, я получаю 9FPS. Счетчик Chrome FPS показывает мне 60FPS.

В целом, производительность страниц браузера - относительно новая тема, представляющая интерес для Web Dev World. Помимо Chrome DevTools, любой другой крупный поставщик, похоже, не проявляет большого интереса к экспорту инструментов для повышения производительности. Поскольку интерес к производительности веб-страницы ограничен, так что много данных.

Идеи большой производительности, которые сосредоточены разработчиками. Производительность прокрутки, эффект CSS на время рисования, анимированные Gifs, как вы упомянули, и, конечно, requestAnimationFrame. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Действительно, прежде чем прыгать в эту полевую область сначала, я рекомендую вам потратить немного времени на то, чтобы понять, что браузер делает для отображения вашей страницы и обновлений на этой странице. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Я бы добавил дополнительные ссылки для вас, но мой SO rep слишком низок.

Answer 2

Что касается того, что вы написали о requestAnimationFrame:

Кроме того, так как RAF только прилагается на уровне окна, она не может быть привязана к конкретным узлам DOM

Вы можете (в теории) имеют код, запущенный в iframe, поэтому объект window - это весь элемент, или 1px iframe может быть точкой вашего контента.

У меня есть эта работа в Firefox, если посмотреть на mozPaintCount (как вы сказали и как @ alexK85 предлагает в своем ответе), чтобы увидеть, была ли перерисовка после изменения CSS (браузер не перерисовывает сразу после изменения CSS, когда iframe из окна просмотра). Но, я еще не смог сделать подобное с requestAnimationFrame в других браузерах, чтобы установить, была ли перерисовка iframe сразу после изменения CSS.

Есть ли у кого-нибудь какие-либо предложения о том, как raf можно использовать, чтобы установить, пересматривает ли браузер?