- Оригинальный адрес:Introducing the React Profiler
- Оригинальный автор:Brian Vaughn
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:CoderMing
- Корректор:CoolRice
В React 16.5 добавлена поддержка нового плагина DevTools для профилировщика. Этот плагин использует ReactЭкспериментальный API профилировщикаЧтобы собрать время рендеринга всех компонентов, цель состоит в том, чтобы найти узкое место в производительности вашего приложения React. Это будет работать с нашим предстоящим выпускомквант времениХарактеристики полностью совместимы. (Примечание переводчика: вы можете обратиться кВидео Дэна на 1-й Китайской конференции разработчиков React)
Этот пост в блоге охватывает следующие темы:
Профиль приложения
DevTools добавит новый столбец вкладки «Профилировщик» для приложений, поддерживающих новый API профилирования:
Примечание:
react-dom16.5+ поддерживает профилирование только в режиме DEV, а также может передавать пакет профилирования в производственной среде.react-dom/profilingподдерживать. пожалуйста вУдобство What/react-Prof i…Посмотрите, как использовать этот пакет.
Панель «Профилировщик» изначально пуста. Вы можете нажать кнопку записи, чтобы начать профиль:
Как только вы начнете запись, DevTools будет автоматически собирать данные о производительности вашего приложения каждый момент (после запуска). (Во время записи) Вы можете использовать свое приложение как обычно, когда вы закончите профиль, нажмите кнопку «Стоп».
Если ваше приложение повторно отображается несколько раз в течение профиля, DevTools предоставит несколько способов просмотра данных о производительности. мы будемобсудить их дальше.
Просмотр данных о производительности
Обзор коммитов
Концептуально React работает в два этапа:
- существуетrenderЭтапы определяют, какие изменения необходимо внести в такие данные, как DOM. На этом этапе React будет выполнять (каждого компонента)
renderметод, который затем вычисляется и вызываетсяrenderЧто изменилось до метода. -
commitНа этапе React фиксирует любые изменения (в случае React DOM это когда React добавляет, изменяет и удаляет узлы DOM). Также на этом этапе React выполнит что-то вроде
componentDidMountа такжеcomponentDidUpdateтакие периодические функции.
(Примечание переводчика: здесь вы можете обратиться кМаленькая книга React.js, части 18-20)
Профилировщик DevTools собирает данные о производительности на этапе фиксации. Каждый коммит будет отображаться на гистограмме в верхней части интерфейса:
На гистограмме каждый столбец представляет отдельные данные фиксации, и выбранный в данный момент столбец фиксации станет черным. Вы можете нажать на каждый столбец (или кнопку переключения влево/вправо), чтобы просмотреть различные данные фиксации.
Цвет и высота этих столбцов соответствуют тому, сколько времени потребовалось для рендеринга коммита (более высокие, более желтые столбцы занимают больше времени, чем более короткие, более синие столбцы).
фильтр фиксирует
Чем дольше ваш профиль зарегистрирован, тем больше времени потребуется для рендеринга. Иногда вас может беспокоить слишком много (малозначительных) записей коммитов. Чтобы помочь вам в этом, профилировщик предоставляет функцию фильтра. Используйте его, чтобы указать порог времени, после которого профилировщик скроет все значения, превышающие этот порог.Быстреекоммит.
график пламени
(Примечание переводчика:Руан Ифэн: Как читать график пламени?)
График пламени отобразит информацию об указанной вами фиксации. Каждый столбец на диаграмме представляет компонент React (например, на диаграмме нижеApp,Nav). Размер и цвет каждого столбца представляют время рендеринга компонента и его дочерних элементов, представленных этим столбцом (ширина столбца представляет время, затраченное на самый последний рендеринг компонента, а цвет столбца представляет время, когда он взялся за рендеринг в коммите).
Примечание:
Ширина столбца указывает, как долго компонент (и его дочерние элементы) в последний раз выполняли визуализацию. Если компонент не подвергался повторному рендерингу в этой фиксации, отображаемое время представляет собой время последнего рендеринга. Чем шире столбец, тем больше времени требуется для отображения компонента, который он представляет.
Цвет столбца указывает, сколько времени компонент (и его дочерние элементы) потратил на эту фиксацию. Желтый означает более длительное время, синий означает более короткое время, а серый означает, что компонент не был (повторно) отрендерен в этом коммите.
Например, коммит, показанный на изображении выше, отрисовывался в общей сложности 18,4 мс.Routerкомпонент был «самым дорогим» компонентом для рендеринга (18,4 мс). Большую часть времени он проводит с двумя детьми:Nav(8,4 мс) иRoute(7,9 мс). Остальное время тратится на других его дочерних элементов и собственный рендеринг.
Вы можете увеличить или уменьшить масштаб диаграммы пламени, нажав на столбец компонента:
Нажатие на компонент также выберет его, его конкретная информация будет отображаться в столбце данных справа, а столбец будет отображать состояние компонента на момент этой фиксации.propsа такжеstate. Вы можете копаться в данных, чтобы узнать, что именно сделал этот коммит.
В некоторых случаях переключение между разными коммитами после выбора компонента также может найти причину срабатывания этого рендеринга:
На приведенном выше рисунке показано, что в двух коммитахstate.scrollOffsetбыл изменен. Возможно, это триггерListПричина перерисовки компонента.
Сортировка графа
Как и график пламени, график сортировки также будет отображать информацию об указанной вами фиксации, и каждый столбец на графике представляет компонент React (например, на следующем рисунке).App,Nav). Отличие в том, что граф сортировки последовательный, и компонент, который занимает больше всего времени, будет отображаться в первой строке.
Примечание:
Время рендеринга компонента также включает время, затраченное его дочерними элементами, поэтому компонент, рендеринг которого занимает больше всего времени, обычно находится ближе всего к вершине дерева.
Как и в случае с графиком пламени, вы можете увеличивать или уменьшать масштаб отсортированного графика, щелкая столбец компонента.
Диаграмма компонентов
Во время вашего профиля иногда полезно использовать этот график, чтобы увидеть время рендеринга одного компонента (за несколько коммитов). График компонента отображается в виде столбца, где каждый столбец представляет время рендеринга для фиксации выбранного компонента. Каждая высота столбца и цвет указывают на то, что компонент находится в фиксациис другими компонентамидлительное сравнение.
На изображении выше показано, что компонент List отображается 11 раз. Это также показывает, что List является самым «дорогим» компонентом для рендеринга. (Примечание переводчика: об этом судят по цвету столбца)
Есть два способа просмотреть этот график: дважды щелкнуть компонент или выбрать компонент и нажать синюю кнопку таблицы в правом столбце. Вы можете вернуться к исходному изображению, нажав кнопку «x» в правом столбце, и, конечно же, вы можете дважды щелкнуть столбец на диаграмме компонентов, чтобы просмотреть дополнительную информацию об этой фиксации.
Если выбранный вами компонент никогда не визуализировался во время профилирования, появится следующее сообщение:
Взаимодействия
React недавно добавилЭкспериментальный API, чтобы отследить причину обновления. «Взаимодействия», отслеживаемые этими API, также отображаются в профилировщике:
На изображении выше показаны 4 взаимодействия, которые отслеживаются в профиле. В каждой строке показано отслеживаемое взаимодействие. Цветные точки в каждой строке представляют запись фиксации, соответствующую ее взаимодействию.
Вы также можете увидеть взаимодействия, отслеживаемые во время этой записи в правой колонке конкретной записи Commit.
Вы можете прыгать между взаимодействиями и коммитами, нажав на них:
API отслеживания все еще очень новый, и мы подробно расскажем о нем в следующем сообщении в блоге.
Часто задаваемые вопросы и решения
Данные профиля не регистрируются для выбранного корневого элемента
Если ваше приложение имеет несколько «корней» (Примечание переводчика: React имеет несколько корневых компонентов), вы можете увидеть следующее сообщение после профиля:
Это сообщение указывает на то, что данные о производительности не были записаны в корневом каталоге, который вы выбрали на экране «Элементы». В этом случае попробуйте выбрать другой корневой элемент для просмотра данных профиля в этом корне:
В выбранной записи фиксации нет данных о времени для отображения
Иногда скорость фиксации может быть настолько высокой, чтоperformance.now()Невозможно предоставить какие-либо значимые данные для DevTools. В этом случае будет отображаться следующий интерфейс:
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,специальный поезд Чжиху.