Xcode / Instruments / Time Profiler를 사용하여 React Native 소스 코드를 프로파일 링하는 방법

우리는 React Native 0.59.10및 React-Redux 5.0.7를 사용하고 있으며 Redux 작업이 완료되는 데 ~ 0.25 초가 걸리는 CPU 바인딩 성능 문제가 발생합니다.

인스트루먼트에서 Time Profiler 구성을 사용하여 프로파일 링했지만 JS 코드는 상징화되어 있지 않습니다.

Chrome에서 원격으로 디버깅하는 것은 "원격 관리자"페이지를 디버깅하는 것 같습니다. 이는 전혀 도움이되지 않습니다.

소스 맵을 빌드 / 첨부하거나 아래에 표시된 메모리 주소를 JS 함수 이름 / 호출로 상징하는 방법이 있습니까?

파이어 폭스 프로파일 러

Firefox 프로파일 러 이해

Firefox 프로파일 러에는 profiler.firefox.com/docs/에 최신 설명서가 있습니다. 그러나 다음은 Gecko 관련 문제에 대한 유용한 정보가 될 수 있습니다.

Firefox 프로파일 러에 대해 자주 묻는 질문을 확인할 수 있습니다.

성능보고 문제에는 Firefox 개발자가 요청할 때 프로파일을 얻는 단계별 안내서가 있습니다.

1. 타임 라인

타임 라인에는 흥미로운 이벤트를 나타내는 여러 행의 추적 마커 (색상 세그먼트)가 있습니다. 자세한 정보를 보려면 해당 항목 위로 마우스를 가져갑니다. 추적 마커 아래에는 다양한 스레드의 활동에 해당하는 행이 있습니다.

팁 : "[default]"로 주석 처리 된 스레드는 상위 (일명 "UI", "브라우저 크롬", "메인") 프로세스에 있고 "[tab]"으로 주석 처리 된 스레드는 웹 컨텐츠 (일명 " "자식") 프로세스.

팁 : 상위 프로세스에서 장기 실행 작업은 브라우저 UI (일명 "UI jank")를 사용하여 모든 입력 또는 그리기를 차단하는 반면 콘텐츠 프로세스에서 장기 실행 작업은 페이지와의 상호 작용을 차단하지만 여전히 사용자가 화면 이동 및 APZ 덕분에 줌 확대.

추적 마커

Red: 이벤트 루프가 응답하지 않음을 나타냅니다. vsync와 같은 우선 순위가 높은 이벤트는 여기에 포함되지 않습니다. 또한 이것은 대기중인 이벤트가 있었을 때 발생한 일을 나타내며 해당 이벤트가 오랫동안 보류 된 것은 아님을 참고하십시오.

Black: 동기 IPC 호출을 나타냅니다.

2. 콜 트리

Call Tree는 벽시계 시간으로 데이터를 보여주는 'Running Time'으로 구성된 샘플을 보여줍니다. 트리 요소 오른쪽에는 코드의 출처를 나타내는 밝은 회색 이름이 있습니다. 요소는 JavaScript, Gecko 또는 시스템 라이브러리에서 제공 될 수 있습니다. 일부 기능의 이름이 아직 적절하지 않으면 기호화가 아직 완료되지 않았을 수 있습니다.

팁 : 함수 이름을 마우스 오른쪽 버튼으로 클릭하여 클립 보드에 이름을 복사하는 옵션을 얻을 수 있습니다.

3. 프로필 공유 "공유 ..."> 공유를 클릭하면 열려있는 URL과 Firefox 확장이 서버로 전송 된 프로필 데이터에 포함된다는 것을 확인합니다. 다른 시간 범위를 선택하면 "퍼머 링크"를 눌러 표시되는 URL이 변경되어 URL 수신자가보고있는 것과 동일한 내용을 볼 수 있습니다.