Выявление и устранение узких мест
Профилируйте приложение и устраняйте узкие места производительности
«Выявление и устранение узких мест» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Измерьте, прежде чем оптимизировать
Попытки угадать, почему приложение работает медленно, отнимают время. Профессиональный подход заключается в том, чтобы сначала измерить, найти настоящее узкое место, устранить его, а затем снова выполнить измерение. Vue DevTools и профилировщик браузера — ваши основные инструменты.
Vue DevTools
Расширение Vue DevTools для браузера позволяет изучать дерево компонентов, реактивное состояние и события. На вкладке Производительность записывается продолжительность отрисовки компонентов, чтобы вы могли обнаружить медленные компоненты.
Использование вкладки производительности
Начните запись, поработайте с приложением, а затем остановите запись. DevTools покажет временную шкалу отрисовки компонентов. Компоненты с длинными или часто появляющимися полосами отрисовки — ваши главные подозреваемые.
Профилировщик браузера
Панель производительности DevTools браузера записывает работу всей страницы: выполнение сценариев, отрисовку и рисование. Длинные жёлтые блоки выполнения сценариев часто указывают на тяжёлую работу JavaScript во время отрисовки.
Как обнаружить чрезмерную повторную отрисовку
Распространённое узкое место — компонент, который повторно отрисовывается гораздо чаще, чем ожидалось. Если небольшое изменение заставляет повторно отрисовывать большое поддерево, ищите общее реактивное состояние или отсутствующие границы компонентов.
Отрисовка больших списков
Одновременная отрисовка тысяч узлов DOM выполняется медленно и потребляет много памяти. Если список содержит сотни или тысячи строк, узким местом становится сам DOM, а не логика обработки данных.
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>Принцип виртуальной прокрутки
Виртуальная прокрутка отрисовывает только строки, видимые в области просмотра, и небольшой буфер, повторно используя узлы DOM при прокрутке. В списке из 10 000 элементов в DOM остаётся всего несколько десятков узлов.
Использование библиотеки виртуальных списков
Библиотеки вроде vue-virtual-scroller реализуют это за вас. Вы передаёте им все данные и высоту строки, а они управляют отображением видимого окна.
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>Ошибки повторной отрисовки, связанные с ключами
Использование индекса массива в качестве :key в динамическом списке может привести к неправильному повторному использованию узлов DOM Vue при добавлении, удалении или перестановке элементов, что вызывает отображение неверного содержимого и лишние повторные отрисовки.
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>Исправление ошибок ключей
Используйте в качестве ключа стабильный уникальный идентификатор, чтобы Vue мог правильно сопоставлять элементы с данными при обновлениях.
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>Практический рабочий процесс
Объедините всё вместе: запишите профиль с помощью DevTools, найдите самый медленный компонент, проверьте наличие чрезмерных повторных отрисовок или огромных списков, примените подходящее исправление (кэширование вычисляемых свойств, v-memo, виртуальную прокрутку, стабильные ключи), а затем снова выполните измерение, чтобы подтвердить улучшение.
Быстрая проверка
Проверьте свои знания о поиске узких мест.
Итоги
Оптимизируйте приложение, сначала измерив его производительность с помощью Vue DevTools и профилировщика браузера, а затем устранив настоящие узкие места: чрезмерные повторные отрисовки, огромные списки (исправляются виртуальной прокруткой) и ошибки, вызванные индексами в ключах (исправляются стабильными ключами). Всегда выполняйте повторное измерение, чтобы подтвердить результат. Далее вы узнаете, как тестировать приложения Vue.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Выявление и устранение узких мест» бесплатный?
Да — полный текст урока «Выявление и устранение узких мест» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Выявление и устранение узких мест»?
Профилируйте приложение и устраняйте узкие места производительности Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Выявление и устранение узких мест»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Ленивая загрузка и разделение кода
- Методы мемоизации
- Выявление и устранение узких мест