Дорожки производительности React¶

Дорожки производительности React — это специализированные пользовательские записи, которые появляются на шкале времени панели Performance в инструментах разработчика браузера.

Эти дорожки дают разработчикам полную картину производительности приложения React: события и метрики, специфичные для React, показаны рядом с другими важными источниками данных — сетевыми запросами, выполнением JavaScript и активностью цикла событий. Всё это синхронизировано на одной шкале времени панели Performance, чтобы поведение приложения было видно целиком.

Использование¶

Дорожки производительности React доступны только в сборках для разработки и в сборках для профилирования:

Разработка: включены по умолчанию.
Профилирование: по умолчанию включены только дорожки Scheduler. Дорожка компонентов перечисляет только компоненты в поддеревьях, обёрнутых в <Profiler>. Если включено расширение React Developer Tools, в дорожку компонентов попадают все компоненты, даже если они не обёрнуты в <Profiler>. Серверные дорожки в сборках для профилирования недоступны.

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

Подводный камень

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

Использование сборок для профилирования¶

Помимо производственных сборок и сборок для разработки, в React есть специальная сборка для профилирования. Чтобы её использовать, подключайте react-dom/profiling вместо react-dom/client. Рекомендуем на этапе сборки задать алиас react-dom/client на react-dom/profiling через алиасы бандлера, а не править каждый импорт react-dom/client вручную. Во фреймворке может быть встроенная поддержка сборки React для профилирования.

Дорожки¶

Scheduler¶

Scheduler — внутренняя концепция React для управления задачами с разным приоритетом. Эта дорожка состоит из 4 поддорожек, каждая — работа определённого приоритета:

Blocking — синхронные обновления, которые могли быть запущены действиями пользователя.
Transition — неблокирующая работа в фоне, обычно запускается через startTransition.
Suspense — работа, связанная с границами Suspense: показ фолбэков или раскрытие содержимого.
Idle — работа с самым низким приоритетом, которая выполняется, когда нет задач с более высоким приоритетом.

Рендеры¶

Каждый проход рендера состоит из нескольких фаз, которые видны на шкале времени:

Update — то, что запустило новый проход рендера.
Render — React рендерит обновлённое поддерево, вызывая функции рендера компонентов. Отрендеренное поддерево компонентов видно на дорожке компонентов, с той же цветовой схемой.
Commit — после рендера компонентов React применяет изменения к DOM и запускает эффекты разметки, такие как useLayoutEffect.
Remaining Effects — React запускает пассивные эффекты отрендеренного поддерева. Обычно это происходит после отрисовки (paint), и именно здесь выполняются хуки вроде useEffect. Известное исключение — действия пользователя, например клики и другие дискретные события. В этом случае фаза может выполниться до отрисовки.

Подробнее о рендере и коммите.

Каскадные обновления¶

Каскадные обновления — один из паттернов, которые ухудшают производительность. Если обновление запланировано во время прохода рендера, React может отбросить уже сделанную работу и начать новый проход.

В сборках для разработки React может показать, какой компонент запланировал новое обновление. Это касается и обычных обновлений, и каскадных. Расширенную трассировку стека можно посмотреть, кликнув по записи «Cascading update»: там же должно быть имя метода, который запланировал обновление.

Подробнее об эффектах.

Компоненты¶

Дорожка компонентов показывает длительность компонентов React. Они отображаются флеймграфом: каждая запись — длительность рендера соответствующего компонента и всех его дочерних компонентов.

Как и длительность рендера, длительность эффектов показана флеймграфом, но с другой цветовой схемой, которая совпадает с соответствующей фазой на дорожке Scheduler.

Примечание

В отличие от рендеров, не все эффекты по умолчанию видны на дорожке компонентов.

Чтобы сохранить производительность и не перегружать интерфейс, React показывает только те эффекты, которые длились 0.05 мс или дольше либо вызвали обновление.

Во время фаз рендера и эффектов могут появляться дополнительные события:

Mount — смонтировано соответствующее поддерево рендеров или эффектов компонентов.
Unmount — размонтировано соответствующее поддерево рендеров или эффектов компонентов.
Reconnect — похоже на Mount, но только когда используется <Activity>.
Disconnect — похоже на Unmount, но только когда используется <Activity>.

Изменённые пропсы¶

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

Сервер¶

Серверные запросы¶

Дорожка серверных запросов показывает все промисы, которые в итоге попадают в серверный компонент React. Сюда входят любые async-операции, например вызов fetch или асинхронные файловые операции Node.js.

React старается объединить промисы, запущенные из стороннего кода, в один спан: он показывает, как долго вся операция блокировала собственный код. Например, метод сторонней библиотеки getUser, который внутри несколько раз вызывает fetch, будет одним спаном getUser, а не несколькими спанами fetch.

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

Отклонённые промисы показаны красным вместе с отклонённым значением.

Серверные компоненты¶

Дорожки серверных компонентов показывают длительность серверных компонентов React и промисов, которые они ожидали. Время показано флеймграфом: каждая запись — длительность рендера соответствующего компонента и всех его дочерних компонентов.

Если вы ожидаете промис через await, React покажет длительность этого промиса. Чтобы увидеть все операции ввода-вывода, используйте дорожку серверных запросов.

Разные цвета показывают длительность рендера компонента. Чем темнее цвет, тем дольше длится рендер.

Группа дорожек серверных компонентов всегда содержит дорожку «Primary». Если React может рендерить серверные компоненты параллельно, появятся дополнительные дорожки «Parallel». Если одновременно рендерится больше 8 серверных компонентов, React отнесёт их к последней дорожке «Parallel», а не будет добавлять новые дорожки.

Источник — https://react.dev/reference/dev-tools/react-performance-tracks