react perf devtool
vtool
Ищу сопровождающих
Devtool для проверки производительности компонентов React
Введение
Демо
Использование
Установить
Использование
Описание
Фазы
Выполнение
Внося
Лицензия
React Performance Devtool - это расширение браузера для проверки производительности компонентов React. Статистически исследует эффективность компонентов React на основе мер, которые собираются с помощью React с использованием API window.performance .
Наряду с расширением браузера, меры также могут быть проверены в консоли. Смотрите раздел использования для более подробной информации.
Этот проект начался с целью продления работы, проделанной Уиллом Чэнь, по предложению для таблицы производительности React. Вы можете прочитать больше об этом здесь.
Демонстрация расширения, используемого для изучения производительности компонентов React на моем веб -сайте.
Меры эффективности также могут быть зарегистрированы в консоли. С каждым повторным разрешением меры обновляются и регистрируются в консоли.
Удалите или размонтируйте экземпляры компонентов, которые не используются.
Осмотрите то, что блокирует или занимая больше времени после начала операции.
Изучите таблицу и посмотрите, для каких компонентов вам нужно написать LifPonentUpdate Lifecycle Hook.
Изучите, какие компоненты занимают больше времени для загрузки.
Чтобы использовать этот Devtool, вам нужно установить модуль NPM, который зарегистрирует слушатель (подробнее об этом в разделе использования) и расширении браузера.
Установка расширения
Приведенные ниже расширения представляют собой текущий стабильный выпуск.
Установка модуля NPM
npm install react-perf-devtool
Сборка umd также доступна через UNCKG
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >Это расширение и пакет также зависят от React. Пожалуйста, убедитесь, что у вас также установлены.
Примечание - модуль NPM важен и требуется для использования DevTool. Поэтому убедитесь, что вы установили его перед использованием расширения браузера.
В этом разделе документации объясняется использование Devtool и API для регистрации наблюдателя в приложении React.
React react-perf-devtool полагается на собственное window.PerformanceObserver . Для получения дополнительной информации см. Официальные документы Mozilla здесь.
Чтобы использовать это расширение Devtool, вам необходимо зарегистрировать наблюдатель в вашем приложении, который в течение некоторого времени будет наблюдать за сбором данных (показателей производительности).
Регистрация наблюдателя
Регистрация наблюдателя очень проста и является только одним вызовом функции. Посмотрим, как!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) Вы можете разместить этот код в свой файл index.js (рекомендуется) или любой другой файл в вашем приложении.
Примечание - это следует использовать только в режиме разработки только тогда, когда вам необходимо осмотреть производительность компонентов React. Обязательно удалите его при строительстве для производства.
Регистрация наблюдателя зацепит объект, содержащий информацию о событиях и показателях производительности компонентов React в окно, к которому можно получить доступ внутри осмотренного окна, используя eval ().
С каждым повторным разрешением этот объект обновляется с новыми мерами и количеством событий. Расширение заботится о очистке памяти, а также кеш.
Вы также можете передать объект option и необязательный callback , который получает аргумент, содержащий проанализированные и агрегированные меры
Используя обратный вызов
Необязательный обратный вызов также может быть передан в registerObserver , который получает проанализированные меры в качестве аргумента.
Вы можете использовать этот обратный вызов, чтобы осмотреть проанализированные и агрегированные меры, или вы можете интегрировать его с любым другим вариантом использования. Вы также можете использовать эти показатели производительности с использованием Google Analytics, отправив эти меры на аналитическую панель панели. Этот процесс задокументирован здесь.
Пример -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback ) После того, как вы зарегистрировали наблюдатель, запустите локальный сервер разработки и перейдите по адресу http://localhost:3000/ .
Примечание - это расширение работает только для реагирования 16 или выше.
После того, как вы успешно установили расширение, вы увидите вкладку под названием React Performance в инструментах разработчика Chrome.
Меры эффективности также могут быть зарегистрированы в консоли. Однако процесс печати мер не является прямым. Вам нужно будет настроить сервер, который прослушивает меры. Для этого вы можете использовать Micro от Zeit, который является HTTP Microservice.
npm install --save micro
Вы можете передать объект опции в качестве аргумента для registerObserver , чтобы включить регистрацию и настройку номера порта.
Использование объекта опции
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} Вы можете передать три свойства объекту option , shouldLog и port .
shouldLog - это требует логического значения. Если установить в True, меры будут зарегистрированы в консоли.
port - номер порта для сервера, куда будут отправлены меры
timeout - значение тайм -аута для отложения инициализации расширения.
Если ваше приложение требует времени для загрузки, лучше отложить инициализацию расширения, указав значение тайм -аута через свойство timeout . Это гарантирует, что расширение будет загружаться только после того, как ваше приложение будет должным образом загружено в браузер, чтобы можно было отображаться обновленные меры. Тем не менее, вы можете пропустить это свойство, если ваше приложение имеет небольшой размер.
Пример
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}Схема мер
Ниже приведена схема показателей эффективности, которые регистрируются в консоли.
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}компоненты
Вы также можете осмотреть производительность конкретных компонентов, используя параметры через свойство components .
Пример -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) Раздел обзора представляет собой обзор общего времени (%), взятого всеми компонентами в вашем приложении.
Время, затрачиваемое всеми компонентами - показывает время, затрачиваемое всеми компонентами (сочетание всех фаз).
Продолжительность времени для совершения изменений - показывает время, потраченное на совершение изменений. Узнайте больше об этом здесь
Продолжительность времени для совершения эффектов хоста - показывает время, затрачиваемое на совершение эффектов хоста, т.е. эффектов хозяина (эффект подсчитывается в коммите).
Продолжительность времени для вызова методов жизненного цикла - Сообщает продолжительность времени вызова крючков жизненного цикла и общего невозможного методов, когда нажичный цикл планирует каскадное обновление.
Общее время
Очистка - кнопка прозрачной кнопки очищает меры из таблиц, а также вытирает результаты.
Перезагрузите проверенное окно - эта кнопка перезагружает осмотренное окно и отображает новые меры.
В ожидании событий - это указывает на ожидающие меры (данные о производительности React).
В этом разделе показано время, затрачиваемое компонентом на этапе, количество экземпляров компонента и общее время, объединяющее все фазы в MS и %
Ниже приведены различные фазы, на которые реагирует, измеряет производительность:
Согласование дерева реагирования - На этом этапе реагирование делает корневой узел и создает работу в прогрессе. Если бы были некоторые каскадные обновления во время примирения, это приостановит какие -либо активные измерения и возобновит их в отсроченном цикле. Это вызвано, когда обновление верхнего уровня прерывает предыдущий рендеринг. Если на этапе рендеринга была выброшена ошибка, то она захватывает ошибку, обнаружив ближайшую границу ошибки или использует корень, если нет границы ошибки.
Изменения в совершении совершения - на этом этапе выполненная работа выполняется. Кроме того, он проверяет, имеет ли корневой узел какой-либо побочный эффект. Если он имеет эффект, добавьте его в список (прочитайте больше этой структуры данных здесь) или совершите все побочные эффекты в дереве. Если в текущем коммите есть запланированное обновление, то оно дает предупреждение о каскадном обновлении в LifeCycle Hook . На этапе фиксации обновления запланированы в текущем коммите. Кроме того, обновления запланированы, если фаза/этап не является ComponentWillMount или ComponentWillReceiveProps.
Эффекты совершения хоста - эффекты хоста совершаются всякий раз, когда вставлено новое дерево. С каждым новым обновлением, которое запланировано, рассчитываются общие эффекты хоста. Этот процесс выполняется в два этапа, первый этап выполняет все вставки узлов хоста, удаление, обновление и ссылки, а другой фаза выполняет все обратные вызовы жизненного цикла и ссылки.
Получите жизненный цикл - когда первый проход был завершен во время совершения эффектов хоста, дерево работы в работе стало нынешним деревом. Таким образом, работа в процессе актуальна во время ComponentDidMount/Обновление . На этом этапе все жизненные циклы и обратные вызовы ссылок. Выполнение жизненных циклов происходит как отдельный проход, так что все размещения, обновления и удаления во всем дереве уже были вызваны .
В предыдущей версии этого Devtool показаны показатели производительности вместо того, чтобы прислушиваться к типу события. Это требуется для комментирования линии внутри пакета react-dom ( react-dom.development.js ), чтобы эти метрики могли быть захвачены этим инструментом.
Но теперь, с помощью API API наблюдателя производительности, наблюдатель может быть зарегистрирован для прослушивания события конкретного типа и получения записей (показателей производительности). react-perf-devtool обеспечивает API в дополнение к наблюдателю производительности, функцию, которая регистрирует наблюдатель.
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )Этот наблюдатель слушает событие измерения производительности React. Он подключает объект, содержащий информацию о событиях и показателях производительности компонентов React в окно -объект, к которому можно получить доступ внутри проверенного окна, используя eval ().
С каждым повторным разрешением этот объект обновляется с новыми мерами и количеством событий. Расширение заботится о очистке памяти, а также кеш.
Объект option и необязательный callback также могут быть переданы в registerObserver . Объект option полезен, когда меры производительности должны быть зарегистрированы в консоли. callback получает проанализированные и агрегированные результаты (метрики) в качестве аргумента, который затем можно использовать для анализа.
Расчет и агрегация результатов происходит внутри кадры приложения, а не в Devtool. У него есть свои преимущества.
Прочитайте руководство по внесению
Грань
