Chrome DevTools — мониторинг производительности

внешний интерфейс Программа перевода самородков Chrome
Chrome DevTools — мониторинг производительности

Chrome DevTools — мониторинг производительности

Вам часто требуется JavaScript или CSS для оптимизации, но вы не можете найти простой способ измерить эффект от оптимизации?

Конечно, вы можете использовать временную шкалу для записи, но в большинстве случаев временная шкала только записывает данные и не обновляется в реальном времени. На данный момент есть и другие советы по измерению производительности. В Chrome DevTools добавлена ​​вкладка «Монитор производительности», которая показывает производительность в реальном времени:

Они доступны в стабильной версии Chrom и позволяют осуществлять следующий мониторинг производительности:

  1. Открытый URL: "chrome://flags/#enable-devtools-experiments"
  2. Установите для параметра «Эксперименты с инструментами разработчика» значение «Включено».
  3. Нажмите «Перезапустить сейчас», чтобы перезапустить Chrome.
  4. Откройте Chrome DevTools (сочетание клавиш CMD/CTRL + SHIFT + I).
  5. Откройте DevTools «Настройки» -> «Эксперименты».
  6. 6 кликовSHIFTПоказать скрытые параметры
  7. Установите флажок «Монитор производительности».
  8. Перезапуск devtools (ярлык CMD / Ctrl + Shift + I)
  9. Нажмите «Esc», чтобы открыть дополнительную панель.
  10. Выберите «Монитор производительности».
  11. Нажмите, чтобы включить/отключить
  12. Начните с мониторинга производительности 😀

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

Но хочу поделиться кое-чем новым:

  • "Макетов/сек" и
  • "Пересчет стиля/сек"

Позволяет отслеживать производительность CSS в режиме реального времени, например:

благодарныйcsstriggers.com, мы знаем, что изменение CSStopиleftСвойства запускают весь процесс рендеринга пикселей: рисование, компоновку и композицию. Если мы используем эти свойства для анимации, она будет запускать десятки/сотни действий в секунду.

Но если вы используете CSStransformатрибутtranslateX/Yчтобы переключить анимацию, вы найдете,Это не запускает отрисовку и компоновку, а просто запускает фазу композиции., так как это основано на графическом процессоре, уменьшит использование вашего процессора практически до 0%.

Обо всем этом в статье Пола АйришаПочему использование Translate() для перемещения элементов лучше, чем Top/left. Чтобы измерить разницу, Пол использует «временную шкалу», которая показывает запуск действий рисования и макета. Но в последние годы Пол работал над улучшениями с помощью Chrome DevTools, и неудивительно, что у нас наконец-то появился правильный способ измерения производительности CSS в реальном времени. (Я разветвляю его пример кода для переключения анимации)

Пример

В общем, монитор производительности в Chrome служит многим целям. Теперь вы можете получать данные о производительности приложений в режиме реального времени.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории