Интерфейсный инструмент анализа производительности — анализ производительности Chrome и монитор производительности

оптимизация производительности

Вы когда-нибудь сталкивались с необходимостью оптимизировать свой JavaScript или CSS, но не могли найти способ определить проблему?

Возможно, вы скажете, что можете использовать временную шкалу Chrome для записи, но временная шкала записывает только данные и не обновляется в реальном времени.

Здесь вы можете рассмотреть возможность использования инструмента мониторинга производительности Chrome DevTools «Performance Monitor», который может отслеживать данные о производительности в режиме реального времени.

Поднимите монитор производительности

Чтобы открыть системный монитор, выполните следующие действия.

  • Откройте браузер и введите URL-адрес для мониторинга.
  • согласно сF12Откройте консоль Chrome
  • Нажмите комбинацию клавишCtrl+P
  • войти> Show Performance Monitor, откройте монитор производительности

Обратите внимание, что после нажатия комбинации клавишCtrl+P(Windows, Mac сочетание клавиш — команда + p), вы можете ввести?, предложит 6 разных команд:

  • ...Открытый файл, открытый файл (источник)
  • :, Перейти к строке, перейти к указанной строке файла
  • @, Go to symbol
  • !, Выполнить фрагмент, Выполнить фрагмент
  • >, Выполнить команду, выполнить команду

Показатели производительности монитора производительности

Видно, что их в основном 4.

  • Использование ЦП, использование ЦП
  • Размер головы JS, размер использования памяти JS
  • Узлы DOM, количество узлов DOM, смонтированных в памяти.
  • Слушатели событий JS, количество слушателей событий
  • Document
  • Document Frames
  • Макетов/сек, перекомпоновка макета, процесс, который браузеры используют для расчета позиции и размера всех элементов на странице.
  • Пересчет стилей/сек, перерисовка стиля страницы

Эффект после выполнения:

Audits

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

Для подробного использования, пожалуйста, обратитесь к:Знакомство с функцией аудита Chrome DevTools

Обратите внимание, что для использования Chrome Audits требуется «над стеной».

Анализ производительности

Эти проблемы можно наблюдать с помощью монитора производительности Performance Monitor, а затем использовать инструмент Performance для анализа производительности.

Как показано на рисунке выше, после периода выполнения (несколько секунд или минут) Chrome Devtools выводит краткий аналитический отчет, как показано на следующем рисунке:

Общие проблемы с производительностью

JavaScript-вычисления

В частности, для вычислений это вызовет множество визуальных изменений, которые снизят производительность приложений. Не позволяйте неправильному времени или долго выполняющемуся JavaScript влиять на взаимодействие с пользователем JavaScript Вот несколько распространенных вопросов

  1. Накладные обработчики ввода, которые влияют на скорость отклика или анимацию, позволяют браузеру обрабатывать касания и прокрутку как можно позже или привязывать прослушиватели
  2. Неправильно синхронизированный JavaScript влияет на скорость отклика, анимацию, загрузку, использование requestAnimationFrame, распространение манипуляций с DOM по кадрам, использование сетевых рабочих потоков
  3. Длительный рабочий JavaScript влияет на ответ, чисто вычислительные работы будут переданы на веб-работник. Если вам нужен доступ DOM, с использованием запросаNimationFrame

стиль:

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

Вот некоторые распространенные проблемы с CSS

  1. Вычисления служебных стилей влияют на отзывчивость или анимацию, любое свойство CSS, которое изменяет геометрию элемента, такую ​​как ширина, высота или положение; браузер должен проверять все остальные элементы и переделывать макет. Избегайте свойств CSS, которые вызывают перекомпоновку
  2. Сложные селекторы влияют на отзывчивость или анимацию, а вложенные селекторы заставляют браузер знать все обо всех других элементах, как родительских, так и дочерних. Попробуйте ссылаться на элементы только с одним классом в CSS.

переставлять

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

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

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

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

«Дрожание макета» относится к повторяющимся ситуациям принудительной синхронизации макета. Это происходит, когда JavaScript постоянно записывает и читает из DOM, заставляя браузер постоянно пересчитывать макет.

перерисовать

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

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

Ссылки по теме

Категории