개발자도구, React devtool로 성능 개선하기
Superb-ai의 비디오 어노테이션 앱 배포 전 성능 최적화 작업의 기록입니다.
웹 서비스를 완성하고 배포하기에 앞서 성능 최적화 작업을 해주는 것은 중요합니다.
불필요하게 렌더링되는 컴포넌트는 없는지, 연산이 오래걸려 병목을 발생시키는 함수는 없는지 확인해볼 필요가 있습니다.
그래서 실무에서 개발자 도구를 이용하여 성능을 개선한 사례 중 일부를 공유하려 합니다.
React devtool로 타임라인 띄우기
성능 측정에는 크롬 확장프로그램인 React developer tools의 Profiler를 사용했습니다.
React 프로젝트가 아니더라도 개발자도구의 Performance 탭에서 측정이 가능합니다.
다만 React 프로젝트라면 실행된 함수의 이름을 좀 더 명확히 표시해주고 React와 관련된 다양한 옵션을 이용할 수 있어
React developer tools 사용을 권장합니다.
1. 개발자 도구의 Performance 탭에서 좌측 상단의 녹화버튼을 클릭합니다
2. 측정이 필요한 상호작용을 실행해줍니다. 여기서는 사각형을 그리는 상호작용의 성능을 측정하려합니다.
3. 좌측 상단의 다운로드 버튼을 클릭하여 json 파일을 받아 Profiler 탭에 드래그 해줍니다.
타임라인 분석하기
이제부터 해야할 것은 조금 지루한 작업이 될 수도 있습니다. 타임라인을 보면서 어떤 함수들이 실행되었는지, 그 중 불필요하게 많이 호출된다거나 실행시간이 긴 함수는 없는지 찾아야합니다.
타임라인을 분석한 결과, 다음과 같은 병목지점을 찾아낼 수 있었습니다.
click 이벤트 발생 시, 실행되는 getPlacementData라는 함수의 실행시간이 83.5ms로 꽤나 깁니다.
조사해보니 툴팁 구현에 사용된 radix-ui 라이브러리의 함수네요. 툴팁의 위치가 브라우저를 넘어가지 않게 보정해주는 함수입니다.
보통 이런 dynamic하게 실행되는 함수들은 실행시간이 꽤나 걸리는 경우가 많습니다.
툴팁의 개수가 많지 않을 뿐더러 자동으로 설정해줘야할 이유도 없으니 비활성화하고 위치는 정적으로 설정해주었습니다.
이와 같은 방법으로 타임라인 분석을 통해 성능을 잡아먹는 함수들을 찾아낼 수 있겠습니다.