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

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

Установите расширение для браузера или запустите отдельное приложение. В проектах Vite плагин vite-plugin-vue-devtools добавляет инспектор внутри приложения.

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

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

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

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

Лишняя отрисовка — это повторная отрисовка компонента, результат которой не изменился. Такие случаи отображаются как повторяющиеся события отрисовки, не изменившие DOM.

Частая причина — передача заново созданного объекта или встроенной стрелочной функции в качестве свойства при каждом рендеринге, из-за чего мемоизация перестаёт работать. Дочерний компонент повторно рендерится, хотя его отображаемый результат не изменился.

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

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

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

Что показывает граф фиксаций на вкладке производительности?

Используйте вкладку производительности и временной шкалы Vue DevTools, чтобы записывать рендеринги. Граф фиксаций показывает каждую очистку DOM и отрендеренные компоненты, а пламенная диаграмма помогает обнаружить медленные рендеринги. Ищите напрасные рендеринги — компоненты, которые повторно рендерятся без изменения результата, часто из-за нестабильных ссылок на свойства, — и исправляйте их с помощью вынесенных констант или computed.