Profiler

<Profiler> позволяет программно измерить производительность рендеринга дерева React.

<Profiler id="App" onRender={onRender}>
    <App />
</Profiler>

Описание

<Profiler>

Оберните дерево компонентов в <Profiler> для измерения его производительности рендеринга.

<Profiler id="App" onRender={onRender}>
    <App />
</Profiler>

Пропсы

• id: Строка, идентифицирующая часть пользовательского интерфейса, которую вы измеряете.
• onRender: Обратный вызов onRender, который React вызывает каждый раз, когда компоненты в профилированном дереве обновляются. Он получает информацию о том, что было отрисовано и сколько времени это заняло.

Предостережения

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

onRender callback

React будет вызывать ваш обратный вызов onRender с информацией о том, что было отрисовано.

function onRender(
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime
) {
    // Aggregate or log render timings...
}

Параметры

• id: Строковый id пропс дерева <Profiler>, которое только что было зафиксировано. Это позволяет определить, какая часть дерева была зафиксирована, если вы используете несколько профилировщиков.
• phase: "mount", "update" или "nested-update". Это позволяет узнать, было ли дерево только что смонтировано в первый раз или было перерендерировано из-за изменения пропсов, состояния или хуков.
• actualDuration: Количество миллисекунд, потраченных на рендеринг <Profiler> и его потомков для текущего обновления. Это показывает, насколько хорошо поддерево использует мемоизацию (например, memo и useMemo). В идеале это значение должно значительно уменьшиться после первоначального монтажа, поскольку многие потомки будут нуждаться в повторном рендеринге только в случае изменения их специфических пропсов.
• baseDuration: Число миллисекунд, определяющее, сколько времени потребуется для повторного отображения всего поддерева <Profiler> без каких-либо оптимизаций. Оно вычисляется путем суммирования последних длительностей рендеринга каждого компонента в дереве. Это значение оценивает стоимость рендеринга в худшем случае (например, при первоначальном монтаже или для дерева без мемоизации). Сравните actualDuration с ним, чтобы узнать, работает ли мемоизация.
• startTime: Числовая метка времени, когда React начал рендеринг текущего обновления.
• endTime: Числовая метка времени, когда React зафиксировал текущее обновление. Это значение разделяется между всеми профилировщиками в коммите, что позволяет группировать их при желании.

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

Измерение производительности рендеринга программно

Оберните компонент <Profiler> вокруг дерева React, чтобы измерить его производительность рендеринга.

<App>
    <Profiler id="Sidebar" onRender={onRender}>
        <Sidebar />
    </Profiler>
    <PageContent />
</App>

Он требует два пропса: id (строка) и обратный вызов onRender (функция), который React вызывает каждый раз, когда компонент в дереве "фиксирует" обновление.

Профилирование в сборке

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

Браузерный Profiler

<Profiler> позволяет вам собирать измерения программно. Если вы ищете интерактивный профилировщик, попробуйте вкладку Profiler в React Developer Tools. Она предоставляет аналогичную функциональность в виде расширения для браузера.

Измерение различных частей приложения

Вы можете использовать несколько компонентов <Profiler> для измерения различных частей вашего приложения:

<App>
    <Profiler id="Sidebar" onRender={onRender}>
        <Sidebar />
    </Profiler>
    <Profiler id="Content" onRender={onRender}>
        <Content />
    </Profiler>
</App>

Вы также можете вложить компоненты <Profiler>:

<App>
    <Profiler id="Sidebar" onRender={onRender}>
        <Sidebar />
    </Profiler>
    <Profiler id="Content" onRender={onRender}>
        <Content>
            <Profiler id="Editor" onRender={onRender}>
                <Editor />
            </Profiler>
            <Preview />
        </Content>
    </Profiler>
</App>

Хотя <Profiler> является легковесным компонентом, его следует использовать только при необходимости. Каждое его использование добавляет некоторые накладные расходы процессора и памяти в приложение.

Источник — https://react.dev/reference/react/Profiler

Комментарии