Первым делом переходим во вкладку network и смотрим на время получения ответа с сервера, если отклик большой, то передаём таску на бэк, если нет, то анализируем проблему в Profiler и Performance.

API React Profiler предназначен для оценки скорости работы рендеринга и помогает выявлять узкие места производительности приложений.

import React, { Fragment, unstable_Profiler as Profiler } from "react"

Компонент Profiler принимает коллбэк onRender в виде свойства. Он вызывается каждый раз, когда компонент в профилируемом дереве фиксирует обновление.

const Movies = ({ movies, addToQueue }) => (
  <Fragment>
    <Profiler id="Movies" onRender={callback}>

Коллбэк onRender принимает параметры, которые описывают то, что рендерится, и время, необходимое на рендеринг. Сюда входит следующее:

• id: Свойство id из дерева компонента Profiler, для которого было зафиксировано изменение.
• phase: или mount (если дерево было смонтировано), или update (если дерево было повторно отрендерено).
• actualDuration: время, затраченное на рендеринг зафиксированного обновления.
• baseDuration: предполагаемое время рендеринга всего поддерева без кеширования.
• startTime: время, когда React начал рендерить это обновление.
• commitTime: время, когда когда React зафиксировал это обновление.
• interactions: множество «взаимодействий» для данного обновления.

const callback = (id, phase, actualTime, baseTime, startTime, commitTime) => {
  console.log(`${id}'s ${phase} phase:`)
  console.log(`Actual time: ${actualTime}`)
  console.log(`Base time: ${baseTime}`)
  console.log(`Start time: ${startTime}`)
  console.log(`Commit time: ${commitTime}`)
}

Загрузим страницу и перейдём в консоль инструментов разработчика Chrome. Там мы должны увидеть следующее.

Мы, кроме того, можем открыть инструменты разработчика React, перейти на закладку Profiler и визуализировать сведения о времени рендеринга компонентов. Ниже показана визуализация этого времени в виде flame-графика.

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

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

import React, { Fragment, unstable_Profiler as Profiler } from "react"
 
render(
  <App>
        
    <Profiler id="Header" onRender={callback}>
            
      <Header {...props} />
          
    </Profiler>
        <Profiler id="Movies" onRender={callback}>
            
      <Movies {...props} />
          
    </Profiler>
      
  </App>,
)

А как проанализировать взаимодействия пользователей с компонентами?

Назад