Анализ узких мест производительности Chrome во время выполнения

внешний интерфейс Chrome

1. Предварительное исследование, поиск проблем на основе явлений

Я давно знаю о производительности хрома, но особо авторитетных и актуальных учебных материалов всегда нет.На этот раз я решил прочитать документ на английском языке напрямую, и по крупицам, этот блокнот основан на Хроме 59.

шаг 1: откройте хром в режиме инкогнито

Цель состоит в том, чтобы избежать кэширования и ненужных проблем

шаг 2: Откройте тестовый адрес

Адрес теста производительности GoogleGoogle chrome.GitHub.IO/Инструменты для разработчиков — Посыпать…
Вы можете увидеть следующую страницу:


На странице движутся маленькие синие квадраты.

шаг 3: ограничение скорости процессора

Из-за высокой производительности ЦП некоторых пользовательских устройств невозможно хорошо проанализировать мобильный терминал или найти проблемы с производительностью низкоуровневых устройств, поэтому приходится снижать скорость.
Найдите элемент производительности в консоли, найдите параметр ЦП и выберите снижение производительности в 4 или 6 раз.

Шаг 4. Добавьте блоки движения, чтобы найти узкие места в производительности.

Производительность процессора ограничена спереди, а затем будет найдено узкое место производительности.
Непрерывно нажимайте кнопку «Добавить 10», чтобы добавлять небольшие блоки на страницу, пока не почувствуете, что движение маленьких блоков на странице явно застопорилось.


Подобно следующей ситуации, он явно застрял

Шаг 5: Давайте посмотрим, каким будет оптимизированный эффект.

Нажмите «Оптимизировать», чтобы оптимизировать и наблюдать за эффектом.


Вы можете видеть, что страница мгновенно становится вор гладкой

Шаг 6. Испытайте оптимизацию и испытайте ее снова без оптимизации

Нажмите кнопку Un-Optimize еще раз, вы увидите, что карта снова мертва.

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

Во-вторых, понять модули производительности

Как анализировать явление, должно зависеть от данных, здесь мы будем использовать функцию производительности хрома.
Сначала переключите страницу в неоптимизированное состояние и нажмите кнопку «Запись».

Просто запишите 4s-5s:

Затем вы можете увидеть эффект записи:


Не беда, если вы не поняли приведенные выше данные, теперь давайте пошагово разберемся, что есть в каждой части

шаг 1: понять Fps

fps: относится к количеству кадров в секунду на странице.
фпс = 60 отличная производительность
fps


Область, отмеченная синим цветом на рисунке, — это информация, записанная FPS.
Масштабируя, FPS состоит из двух частей:
1, красная полоса
2. Зеленая полупрозрачная полоса

действие: 1 переключиться в «оптимизированное» состояние

В это время переключите состояние оптимизации на оптимизированное состояние и снова выполните запись производительности:


Данные Fps получаются следующим образом:

На этот раз вы можете увидеть:
1, без красной полосы
2. Высота зеленой полупрозрачной полосы явно намного выше, чем у неоптимизированной сцены.

Суммировать:

  • Красный: это означает, что количество кадров упало до такой степени, что это влияет на пользовательский опыт, хром отметил это для вас, с этим проблема.

  • Зеленый: По сути, это показатель Fps, чем выше высота всех зеленых цилиндров, тем выше производительность.

Шаг 2: Понимание процессора


Позиция под Fps на приведенном выше рисунке — это информация о процессоре.
Давайте соберем данные реального бизнес-процессора, как показано ниже:

Сравнение можно найти, некоторые характеристики данных процессора:

  • 1. Процессор включает два состояния:

    • (1) полный цвета

    • (2) Не полный цвет

  • 2. Полноцветность процессора связана с частотой кадров

Шаг 3: Понимание Сети

Сетевая часть может записывать экран кадр за кадром, что может помочь наблюдать за состоянием страницы.Основная цель — помочь проанализировать скорость рендеринга первого экрана.

Шаг 4: Понимание фреймов

1. Просмотр кадров в секунду определенного кадра


Раздел «Кадры» в основном используется для просмотра кадров в секунду определенного кадра, и вы можете просмотреть ситуацию с конкретным кадром.

2. Наведите курсор на него, чтобы просмотреть данные


можно увидеть:

  • Временной интервал этого кадра составляет 129,1 мс.

  • Текущий fps составляет 1000 мс/129,1 мс = 7,75 кадра в секунду, что примерно равно 8 кадрам в секунду.

Здесь главное, чтобы интервал между двумя обновлениями страницы составлял 129,1 мс.

3. Щелкните блок Frames, чтобы получить более подробные данные.


Нажмите «Кадры», чтобы отобразить подробную информацию о текущем ключевом кадре:

  • 1. Продолжительность такова, что текущий кадр начинает ждать с 796,31 мс, а рендеринг выполняется через 796,31 мс+127,73 мс.

  • 2, fps по-прежнему старый алгоритм, 1000 мс/127,73 мс — это примерно 7 кадров в секунду.

  • 3. Внизу вид портрета ключевого кадра

шаг 5: Узнайте о ярлыках FPS

1. В хроме есть опция дополнительных инструментов, выберите опцию рендеринга

2. Включите переключатель счетчика кадров в секунду.

3. Прямо на странице появляется статистика fps


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

В-третьих, найти узкое место

Мы уже знаем, что у нашей тестовой страницы есть проблемы с производительностью, так почему же она следующая?

шаг 1: ознакомьтесь с резюме

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


Выше показано конкретное время записи от 0 до 5,52 с:

  • 1. Выполнение скрипта занимает 1952,8 мс

  • 2. Рендеринг занимает 2986,8 мс

  • 3. Перерисовка картины занимает 472,1 мс.


В основном эти три трудоемкие, знайте, что эти три части трудоемкие, просто знайте, проблем нет, но где конкретная проблема?

шаг 2: Узнайте о главном

На картинке выше основная часть обведена красной рамкой, каждая из которых — это то, что сделано в каждом кадре.

В настоящее время я не вижу ничего подобного, и у меня болит мозг.Чтобы облегчить наш просмотр, мы можем нажать на модули fps, cpu и net, чтобы сузить временной интервал.


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

График пламени легко понять. Ось X представляет время, а ось Y представляет вызываемую функцию. Функция также содержит функции, которые вызываются последовательно. Ось Y занимает только одно временное измерение оси X. .

Шаг 3: Определите проблему, красный треугольник


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

Как видно из рисунка выше, выдается предупреждение: повторяющийся процесс занимает 287,77 миллисекунды.

Шаг 4. Отследите проблему и найдите местонахождение кода

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


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

Шаг 5: Дальнейший анализ места возникновения проблемы


Продолжайте просматривать Main, вы можете увидеть много фиолетовых полос под app.update, а сами фиолетовые полосы представляют рендеринг.
Но будь осторожен! ! !На фиолетовой полосе есть еще меньшие
Используйте изученную ранее функцию масштабирования, чтобы настроить временной интервал.

Вы можете видеть, что на каждой маленькой фиолетовой полоске есть красный треугольник.
Как упоминалось ранее: красный треугольник — это место, где хром помогает автоматически определить проблему.
Просмотр оперативной информации:Принудительная перекомпоновка может стать узким местом в производительности
Нажмите, чтобы просмотреть сводку:

Вы можете видеть, что проблема обнаружена, строка 71 app.js, нажмите, чтобы просмотреть, вы можете увидеть, что стиль каждого элемента изменен

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

Чтобы избежать этой ситуации, вы можете обратиться кDevelopers.Google.com/Web/Женщины большие…

Шаг 6: Сравните эффект оптимизации


В демо есть два состояния: оптимизированное и неоптимизированное.
Вы можете видеть состояние оптимизации, и время скрипта и рендера значительно сокращается.
Так что фпс значительно улучшился

шаг 7: Резерв знаний для оптимизации производительности

Измеряйте производительность с помощью модели рельсаDevelopers.Google.com/Web/Женщины большие…
Базовый резерв:

Категории