На эту статью ссылаетсяchromeОфициальная документация для:портал(требуется научный доступ в Интернет)
Инструменты разработчика Chrome предоставляют нам много эффективных инструментов для анализа производительности на страницах. Раньше я использовал только некоторые основные функции. Недавно я подробно прочитал официальные документы, особенноperformanceИспользование панелей (в основном прежней панели Timeline) (требуется относительно новая версия браузера Chrome).
Совет. Эта статья предназначена для общего использования.chromeБазовые методы анализа производительности, не слишком углубляющиеся в причины конкретных проблем с производительностью
Готов к работе
Во-первых, некоторые подготовительные работы перед началом анализа:
Войдите в режим инкогнито, чтобы избежать помех, вызванных плагинами браузера.
ОткрытымperformanceВкладка
Нажмите на маленький значок шестеренки в настройках справа, если это мобильный проект, откройте его.CPUПереключатель дроссельной заслонки, выберите соответствующий в зависимости от производительности компьютера (используется для имитации производительности мобильного телефона)
открыть скриншотScreenshotsСкриншоты каждого кадра во время записи
Если отмеченоmemoryВы также можете увидеть изменения различных компонентов (например, кучи, узла...), занимающих память в процессе записи, и увидеть приблизительный цикл сборки мусора в соответствии с изменениями, а также наличие очевидных утечек памяти.
Официальный пример
Официальный адрес дела(требуется научный доступ в Интернет>_>) Откройте его в соответствии с приведенной выше подготовкой, если вы не можете открыть его, временно посмотрите на изображение, которое я сделал здесь;
Перед оптимизацией сначала получаем различный анализ данных: сначала кликаем по верхнему левому углуrecordТочки отображают производительность предварительно оптимизированной версии во время выполнения и щелкают, чтобы остановить ее по истечении определенного периода времени.Круглые стрелки рядом с точками используются дляloadingкнопка для анализа производительности.Полученный результат показан на рисунке выше.
На основе полученных результатов разберем это пошаговоdemoЧто является узким местом производительности?
Сначала ознакомьтесь со смыслом информации в каждой части рисунка:
Правая часть изображения отмечена:FPS;CPU;NET
прежде всегоFPS(Analyze frames per second)частота кадров;FPSКрасная полоса вверху указывает на то, что низкая частота кадров повлияла на работу пользователя.Обычно, чем выше зеленая полоса, тем выше частота кадров и лучше работа.Если частота кадров не влияет на использование, горизонтальная бар не появится.
ДалееCPUСвязанный анализ: как показано ниже
CPUСоответствующая горизонтальная полоса и следующиеsummary TabПоследовательно, цветовые полосы этой части также находятся в однозначном соответствии.Чем выше эта часть приходится наCPUРасход тоже больше.summary TabТакже можно заметить, что большая часть нашего времени на самом деле проводится вrendering, что также говорит о том, что проблема в нашей демонстрации, скорее всего, связана с кодом, связанным с рендерингом.
.
Двигайте мышью влево-вправо по FPS, CPU, NET, и вы сможете увидеть скриншоты в различные моменты времени, что особенно полезно при анализе различных стадий выполнения и загрузки анимации.
Затем часть с названием справа:
Если период записи содержит сетевой запрос, то вframeесть колонка вышеNetwork, будет использовать разные цвета, чтобы указать, что запрашиваются разные ресурсы
Затем идет область кадров: переместите мышь вверх, чтобы прочитать частоту кадров в это время.
Нажмите сочетание клавиш cmd + shift + p и введите show rendering (откройте панель, чтобы просмотреть частоту кадров в реальном времени) во время процесса записи, вы можете увидеть изменение частоты кадров в реальном времени.
mainПредставляет основной поток, горизонтальная полоса представляет выполнение события (функции), чем больше длина, тем больше времени оно занимает, вертикальная представляет стек вызовов.Если верхний правый угол этих полос красный, это означает, что код выполняется в этом сегменте. Могут быть проблемы с производительностью в .
Представленные здесь, мы видим, что правый верхний угол многих желтых полос на изображении выше красный, поэтому давайте, кстати, проверим узкие места производительности в официальной демонстрации.mainэта часть:
нажмитеanimation frame firedСобытия, вы можете увидеть соответствующую информацию ниже.sourceСоответствующий код в панели.По расположенному сегменту кода, читая код, мы можем обнаружить, что проблема в выбранном коде с синим фоном
Почему возникает проблема с этим кодом? Он принудительно запускает макет, который включает в себя перестановку и перерисовку, и не будет здесь подробно раскрываться. Если вам интересно, вы можете щелкнуть ссылку ниже, чтобы узнать больше.
Наконец, позвольте мне добавитьperformanceнижняя часть панели сSummary TabНесколько вкладок на одном уровне:
Bottom-Up Tab существуетTimelineвыберите период времени, а затем щелкнитеBottom-UpПолучите приведенную выше картинку, на картинке показано время, занимаемое каждой операцией, выполняемой браузером.
Call-tree Tab
Точно так же нажмитеCall TreeПолучите изображение выше: представляет время, затраченное на основные операции браузера (выполнение события, рисование...)
Event log Tab
Точно так же нажмитеEvent LogПолучите картинку выше: Вы можете просмотреть время, затраченное на выполнение событий в соответствии с порядком, в котором события произошли в течение выбранного времени.
Совет: все изображения в этой статье взяты из официальной документации инструментов разработчика Chrome.
Широкая реклама
Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.
Добро пожаловать, чтобы обсудить, поставить лайк и перейти ｡◕‿◕｡～