react perf devtool
vtool
관리자를 찾고 있습니다
React 구성 요소의 성능을 검사하기위한 DevTool
소개
데모
용도
설치하다
용법
설명
단계
구현
기여
특허
React Performance DevTool은 React 구성 요소의 성능을 검사하기위한 브라우저 확장입니다. window.performance API를 사용하여 React에 의해 수집되는 측정 값을 기반으로 React 구성 요소의 성능을 통계적으로 검사합니다.
브라우저 확장과 함께 조치를 콘솔에서 검사 할 수도 있습니다. 자세한 내용은 사용 섹션을 참조하십시오.
이 프로젝트는 Will Chen이 수행 한 작업을 React Performance Table에 대한 제안으로 확장하기위한 목적으로 시작했습니다. 당신은 그것에 대해 더 읽을 수 있습니다.
내 웹 사이트에서 React 구성 요소의 성능을 검사하는 데 사용되는 확장 데모.
성능 측정은 콘솔에도 기록 할 수도 있습니다. 모든 재 렌더마다 측정 값이 업데이트되어 콘솔에 기록됩니다.
사용되지 않는 구성 요소 인스턴스를 제거하거나 마운트하지 않습니다.
작업이 시작된 후 차단하거나 시간이 더 걸리는 것을 검사하십시오.
테이블을 검사하고 어떤 구성 요소를 확인하면, whildcomponentupdate 라이프 사이클 후크를 작성해야합니다.
어떤 구성 요소를로드하는 데 더 많은 시간이 걸리는지 검사하십시오.
이 DevTool을 사용하려면 리스너를 등록하는 NPM 모듈 (사용 섹션에서 자세한 내용) 및 브라우저 확장자를 설치해야합니다.
확장 설치
아래 확장은 현재 안정적인 릴리스를 나타냅니다.
NPM 모듈 설치
npm install react-perf-devtool
umd 빌드는 UNPKG를 통해도 제공됩니다
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >이 확장 및 패키지는 또한 React에 따라 다릅니다. 설치 한 상태도 확인하십시오.
참고 - NPM 모듈은 중요하며 DevTool을 사용해야합니다. 따라서 브라우저 확장을 사용하기 전에 설치했는지 확인하십시오.
이 문서 의이 섹션에서는 React 앱에 관찰자를 등록하기위한 DevTool 및 API의 사용법을 설명합니다.
react-perf-devtool 기본 window.PerformanceObserver 에 의존합니다. Chrome v52 및 Firefox v57 에 추가 된 PerformanceObserver API. 자세한 내용은 공식 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 구성 요소의 성능을 검사해야 할 때만 개발 모드에서만 사용해야합니다. 생산을 위해 빌드 할 때 제거하십시오.
관찰자 등록은 반응 구성 요소의 이벤트 및 성능 측정 에 대한 정보가 포함 된 객체를 윈도우 객체에 고정시킨 다음 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 이상의 버전에 대해서만 작동합니다.
확장을 성공적으로 설치 한 후에는 Chrome Developer Tools에서 React Performance 라는 탭이 표시됩니다.
성능 측정은 콘솔에도 기록 할 수도 있습니다. 그러나 조치를 인쇄하는 과정은 직접적이지 않습니다. 조치를 듣는 서버를 설정해야합니다. 이를 위해 HTTP 마이크로 서비스 인 Zeit의 Micro를 사용할 수 있습니다.
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 ) 개요 섹션은 애플리케이션의 모든 구성 요소가 취한 총 시간 (%)의 개요를 나타냅니다.
모든 구성 요소가 취한 시간 - 모든 구성 요소가 취한 시간 (모든 단계를 결합)을 보여줍니다.
변경 사항을 커밋하기위한 시간 - 변경 사항을 커밋하는 데 소요되는 시간을 보여줍니다. 이것에 대해 자세히 알아보십시오
호스트 효과를 커밋하기위한 시간 지속 시간 - 호스트 효과를 커밋하는 데 소요되는 시간, 즉 새 트리가 삽입 될 때 (업데이트) 및 no. 호스트 효과 (커밋의 효과 수).
라이프 사이클 방법 호출 시간 - 라이프 사이클 후크가 계단식 업데이트를 일정으로 일정 할 때 라이프 사이클 후크 호출 시간과 총 방법이없는 방법을보고합니다.
총 시간
CLEAR -CLEAR 버튼은 테이블의 측정 값을 지우고 결과를 닦습니다.
검사 된 창을 새로 고침 -이 버튼은 검사 된 창을 다시로드하고 새로운 측정 값을 표시합니다.
보류 이벤트 - 이는 보류중인 조치 (REACT 성능 데이터)를 나타냅니다.
이 섹션에서는 위상에서 구성 요소가 취한 시간, 구성 요소의 인스턴스 수 및 MS 및 % 의 모든 단계를 결합한 총 시간
다음은 반응하는 다양한 단계가 성능을 측정합니다.
반응 트리 조정 -이 단계에서, 반응은 루트 노드를 렌더링하고 진행 상황에서 작업을 생성합니다. 조정하는 동안 계단식 업데이트가 있으면 활성 측정을 일시 중지하고 연기 루프로 재개됩니다. 이는 최상위 업데이트가 이전 렌더를 방해 할 때 발생합니다. 렌더 단계에서 오류가 발생하면 가장 가까운 오류 경계를 찾아 오류를 캡처하거나 오류 경계가없는 경우 루트를 사용합니다.
변경 변경 -이 단계에서 완료된 작업이 커밋됩니다. 또한 루트 노드에 부작용이 있는지 확인합니다. 효과가있는 경우 목록에 추가하거나 (여기 에서이 목록 데이터 구조를 읽거나) 트리의 모든 부작용을 커밋하십시오. 현재 커밋에 예정된 업데이트가있는 경우 라이프 사이클 후크의 계단식 업데이트 에 대한 경고를 제공합니다. 커밋 단계에서 업데이트는 현재 커밋에서 예약됩니다. 또한 위상/단계가 구성 요소 WillMount 또는 ComponentWillReceiveProps가 아닌 경우 업데이트가 예정됩니다.
커밋 호스트 효과 - 새 트리가 삽입 될 때마다 호스트 효과가 커밋됩니다. 예약 된 모든 새로운 업데이트마다 총 호스트 효과가 계산됩니다. 이 프로세스는 두 단계로 이루어지며, 첫 번째 단계는 모든 호스트 노드 삽입, 삭제, 업데이트 및 심판 미공개를 수행하며 다른 단계는 모든 수명주기 및 참조 콜백을 수행합니다.
커밋 라이프 사이클 - 호스트 효과를 커밋하는 동안 첫 번째 패스가 완료되면 진행중인 작업이 현재 트리가되었습니다. 따라서 ComponentDidMount/Update 중에 진행중인 작업이 최신입니다. 이 단계에서는 모든 라이프 사이클과 심판 콜백이 커밋됩니다. 수명을 커밋하는 것은 별도의 패스로 발생하여 전체 트리의 모든 배치, 업데이트 및 삭제가 이미 호출되었습니다 .
이 DevTool의 이전 버전에서는 이벤트 유형을 듣는 대신 성능 메트릭이 쿼리되었습니다. 이 도구는 이러한 메트릭을 캡처 할 수 있도록 react-dom 패키지 ( react-dom.development.js ) 내부의 선을 주석해야합니다.
그러나 성능 관찰자 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 성능 측정 이벤트를 듣습니다. 반응 구성 요소의 이벤트 및 성능 측정에 대한 정보가 포함 된 객체를 윈도우 객체에 연결 한 다음 Eval ()을 사용하여 검사 된 창 내부에 액세스 할 수 있습니다.
모든 재 렌더 마다이 개체는 새로운 측정 및 이벤트 수로 업데이트됩니다. 확장자는 메모리와 캐시를 제거해야합니다.
option 객체와 옵션 callback registerObserver 로 전달할 수도 있습니다. option 개체는 성능 측정을 콘솔에 로그인 할 때 유용합니다. callback 분석에 사용할 수있는 인수로 구문 분석 및 집계 결과 (메트릭)를 수신합니다.
결과를 계산하고 집계하는 것은 DevTool이 아닌 앱 프레임 내부에서 발생합니다. 그것은 고유 한 이점이 있습니다.
기고 가이드를 읽으십시오
MIT
