Профилирование веб-инспекторов с помощью "Рамки": поиск причины проблем с производительностью, когда на временной шкале ничего не отображается

Я просто смотрел сеанс ввода-вывода Google Jank Busters: создание веб-приложений для исполнителей, где докладчики объяснили, как использовать новые "Рамки" "в хронологической шкале веб-инспектора Chrome.

Вот пример записи, которую я получил при прокрутке страницы, которую я разрабатываю:

dev tools

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

ОТВЕТЫ

Ответ 1

Ваш пример на самом деле выглядит не так уж плохо. Ваш код работает быстро, и браузер будет отображать только 60 кадров в секунду, поэтому он проводит некоторое время (до 16 мс), ожидая следующего цикла рендеринга.

Вот особенно тревожный снимок из представления Frames на панели Timeline Chrome Tools.

HG5Qn.png

В соответствии с документацией:

  • Серые области показывают активность, которая не была обработана DevTools, и команда Chrome работает, чтобы сохранить эту область как можно меньше.
  • Ясные области указывают время простоя между циклами обновления дисплея, что обычно не является проблемой, особенно если область приносит значения до 60 кадров в секунду, так как это только Хром, ожидающий доставки кадра на vsync монитора

исчезающе маленькие желтые и зеленые области внизу баров указывают на то, что обработка событий, покраска и компоновка выполнялись довольно быстро - достаточно быстро, чтобы попасть под горизонтальную линию, указывающую порог 30fps и, вероятно, быстрее, чем 60fps (строка не показана).

Чтобы узнать больше, откройте параметры инструментов разработчика и проверьте:

PcyRK.png

При этом вы увидите серые области на панели "RECORDS":

voEeD.png

Каждая серая область показывает периоды, в течение которых поток визуализации был занят. Если вы видите много пробелов, тогда браузер, скорее всего, связан с GPU.

Nat Duca, инженер в Chrome, предоставляет дополнительную информацию в этот пост:

Ограниченность GPU обычно происходит из двух вещей:

  • имеющий -webkit-фильтр, сохраняет свойства 3D на элементах. Те едят в gpu как... гм, что-то голодное.
  • Слишком много больших слоев.

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

Правило большого пальца: большинство компьютеров сконструированы так, что они могут касаться каждого пикселя на главном экране примерно 4 раза. Как действительно простой пример, 2-летний MacBook Air предоставляется для размера ЖК-дисплея. Когда вы подключаете 30-дюймовый монитор с несколькими слоями, он начинает получать GPU.

Почему это имеет значение? [Handwaving], слой нажимает один пиксель один раз, когда мы рисуем экран. Если слой является размером вашего окна, например. у вас есть ширина = 100% height = 100% div с -webkit-transform: translateZ (0), затем вы касаетесь каждого пикселя экрана один раз. Итак, подсчитайте область ваших слоев, и если вы превысите в 4 раза площадь вашего монитора, вы не сможете перейти в космос [потому что вы связаны с GPU].

Хорошим критерием ограниченности gpu является уменьшение размера окна на 1/2 в каждом измерении. Если все идет медленно, то происходит что-то еще... если все будет быстрее, вы, вероятно, попадете на GPU.

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

Ответ 2

Я бы рекомендовал вам использовать http://pagespeed.googlelabs.com

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

Кроме того, вам необходимо выполнить профилирование страницы на странице, чтобы узнать, сколько времени требуется для загрузки некоторых объектов в память.