React Redux의 고부하 구성 요소를 빠르고 파악

React Redux로 앱을 만들면
언제나 과도하게 업데이트를 반복하는 구성 요소가 나올 수 있습니다.
이 녀석은 아무런 관련없는 동작을 해도 업데이트 할 수 있으며,
CPU 사용률을 높이고 FPS를 폭하시킵니다.

경우에 따라 일부 구성 요소를 제어하면 작동이 놀라울 정도로 개선되므로
가능한 한 검증 전에 확인하고 싶은 곳입니다.

이번에는 과도하게 업데이트를 반복하는 고부하 구성 요소를 찾는 방법을 소개합니다.

환경 준비

요즘 개발용 머신은 성능이 좋은 것이 많다
확실히 보고, 부하가 높은 처리도 문제 없게 보여 버리는 딜레마가 있습니다.

거기서, 브라우저상에서의 CPU 성능을 억제해 검증을 진행시킵니다.Chrome開発者ツール -> Performance -> CPU 로 환경의 CPU 성능을 낮춥니다.


환경이 준비되면
로컬 개발 환경에서 앱을 실제로 사용하고 동작이 느린 것으로 느껴지는 부분을 찾습니다.

동작 측정

동작이 무거운 부분을 발견하면Chrome開発者ツール -> Performance -> Record 로 측정해 봅시다.Record 는 확실히 알기 어렵지만 왼쪽 상단의 ● 마크입니다.

장시간 측정하면 분석에 시간이 걸리기 때문에
측정 시간은 2초~10초 정도를 기준으로 하는 것이 좋은 느낌입니다.


실제로 측정 한 것이 여기
먼저 빨간색 점선으로 둘러싸인 CPU使用率에 주목합니다.
노란색 영역은 Script処理를 나타내며 CPU 사용률이 높음을 알 수 있습니다.
보라색 영역은 Paint処理를 나타내지 만 CPU 사용률은 낮습니다.

이번에는 Script 처리의 부하가 큰 것 같습니다.

Chrome 개발자 도구에 대한 자세한 설명은 여기를 참조하세요.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / ぇ b /와 ls / ch 로메에서 v와 ls /

CPU 사용률이 높은 부분 보기

CPU 사용률이 높은 부분을 닫습니다.Interactions 와 User Timing 에 주목해 봅시다.

Interactions: Mouse Down Mouse Move 같은 사용자의 행동을 볼 수 있습니다.
User Timing: 내부 처리를 확인할 수 있습니다.

User Timing에서 ComponentName[update]라는 설명이 많이 있음을 알 수 있습니다.
여기가 실제로 구성 요소가 업데이트되는 부분입니다.
Chrome이라고 컴퍼넌트의 이름을 표시해 주기 때문에 문제가 있는 개소를 알기 쉽네요.

이 업데이트하고있는 부분이 제대로 업데이트되면 문제가 없습니다.
과도한 업데이트가 걸린 구성 요소는 로드가 됩니다.

구성 요소 업데이트를 제어하는 ​​것은 의도하지 않은 버그를 생성하기 쉬운 변경입니다.
State, Props의 흐름을 파악해 시책·검증을 하면서 제어해 갑시다.

다음에는 실제로 실시한 컴포넌트 업데이트를 억제하는 방법을 소개하겠습니다.

보충

이번 내용은 공식 「Optimizing Performance」중에서도 조금 소개되고 있습니다.

절차만 알면 문제점을 찾는데 5분도 걸리지 않는다고 생각합니다.

처음에는 이것을 모른다.
코드와 망설이면서 문제가 있는 개소를 찾아야 할 것인가라고, 엄청나게 살았습니다.

끝까지 읽어 주셔서 감사합니다.