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

Question

Существует ли функциональность / инструмент веб-разработчика, который позволяет нам узнать, сколько раз браузер выполняет перекомпоновку?

В основном я хочу получить какую-то обратную связь / информацию.Я не знаю, как это будет, но, возможно, какой-то график производительности, который показывает временную шкалу (сродни Speed ​​Tracer от Google ), чтобы я мог исследовать, когда вдруг в какой-то момент браузер делает безумную суммуиз reflows, так что я могу указать, эй, вот узкое место, должна быть ошибка / плохая реализация чего-то здесь или что-то.

Answer 1

1. В Chrome и Safari есть вкладка «Временная шкала» в веб-инспекторе, где можно просмотреть все перекомпоновки и перерисовки, сделанные браузером.
2. Firefox имеет событие MozAfterPaint . Это может помочь вам понять, какие области страницы и когда перекрашены браузером. Дополнение Firebug Paint Events может быть полезным здесь. Показывает события перерисовки в консоли FireBug.

Answer 2

Вы можете отслеживать информацию о перекомпоновке, если у вас есть собственный Firefox.

см. Ниже: https://developer.mozilla.org/en-US/docs/Debugging_Frame_Reflow

Как собрать Firefox с включенным режимом отладки: https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions

Answer 3

Через некоторое время после конца 2013 года ведение журнала перекомпоновки встроено в ведение журнала Firefox.

https://mail.mozilla.org/pipermail/firefox-dev/2013-October/001044.html

В консоли браузера (Сервис> Веб-разработчик> Консоль браузера) в меню [CSS] выберите «Журнал»