[view] 성능 측정 결과 관련 논의 - 1

[seungineer]

View 성능 최적화 팀에서 오늘(08/06(화) 20:30) 회의했던 내용을 공유드립니다.

---

성능 측정 환경

• Dev 모드 기준
• 크롬 브라우저의 개발자 도구(Performance, Lighthouse)에서 진행

성능 측정 결과

• 하단의 '요약' 탭을 보시면 유휴 상태에서 3070ms, 스크립트 처리에 440ms가 소요됨을 알 수 있습니다.
• 유휴 상태는 githru 실행 시 로딩되는 시간이 측정된 것입니다. 현재 의도적으로(로딩 애니메이션이 동작함을 확인하기 위해) 3000ms timeout이 설정되어 있습니다(이미지 우측 코드).
• 이로 미루어 보아 vscode로부터 IDEMessage를 받기 위해 대기하는(유휴 상태) 시간 외 소요가 큰 작업은 없는 것으로 보입니다(Dev 모드 외 환경에서는 IDEMessage 크기에 따라 변동이 있습니다).

'요약' 탭의 항목에 대한 간단한 설명입니다.

• 유휴 상태 (Idle): 브라우저가 아무 작업도 하지 않고 대기하는 시간
• 스크립트 (Script): JavaScript 코드가 실행되는 데 소요된 시간
• 렌더링 (Rendering): HTML 요소를 화면에 그리는 데 사용된 시간
• 페인팅 (Painting): 픽셀을 화면에 그리는 데 소요된 시간
• 시스템 (System): 브라우저의 내부 작업에 소요된 시간
• 로드 중 (Loading): 네트워크에서 리소스를 가져오는 데 소요된 시간

• 위 이미지처럼 '긴 작업 시간(100ms)'으로 측정되는 부분도 있었습니다. 한 작업은 50ms를 넘지 않도록 하는 게 좋다고 하며 '경고' 표시가 나타났습니다.
• 이 부분이 critical 하진 않을 것으로 판단했습니다. 왜냐하면 '긴 작업 시간'이라고 나타나는 부분이 실사용 시 여전히 매우 짧기 때문입니다. 그리고 100ms 보다 더 긴 작업 시간을 갖는 페이지도 많은 것으로 보아 50ms라는 기준이 다소 엄격한 것으로 판단했기 때문입니다.

• Lighthouse 측정 결과는 97점으로 준수합니다.

이에 성능 최적화 팀에서는 정량적으로 측정 가능한 지표를 개선하기 보다 '리액트 렌더링 최적화', '대규모 레포지토리 대응'에 집중하기로 했습니다!

---

위 내용과 관련하여 의문사항, 의견 등이 있으신 경우 아래 comment로 말씀해주시면 감사하겠습니다. 🚀🚀🚀

[ytaek]

캬. 성능리포트 분석 컨설팅 느낌이군요!!

하단의 '요약' 탭을 보시면 유휴 상태에서 3070ms, 스크립트 처리에 440ms가 소요됨을 알 수 있습니다.

어제 오프에서 얘기한대로 BounceLoader의 timeout은 적당히 줄이면 좋을 것 같네요.

Lighthouse 측정 결과는 97점으로 준수합니다.

오오 생각보다 많이 양호하네요? 👿

이에 성능 최적화 팀에서는 정량적으로 측정 가능한 지표를 개선하기 보다 '리액트 렌더링 최적화', '대규모 레포지토리 대응'에 집중하기로 했습니다!

요걸 이제 이슈 같은걸로 일단 등록해두시면 좋을 것 같습니다.
다음주부터는 project 안에서 관리해볼 수 있도록 해볼께요.

[ytaek]

#517 내용 한번 검토해주시고, 관련되서 파악이 끝나셨으면 517은 close하셔도 좋을 것 같습니다.

[seungineer]

어제 오프에서 얘기한대로 BounceLoader의 timeout은 적당히 줄이면 좋을 것 같네요.

Issue 생성 하였습니다! (#615)

Lighthouse 측정 결과는 97점으로 준수합니다.

오오 생각보다 많이 양호하네요? 👿

추후 fakeAsset 타입을 다양하게 하여 테스트해보고, 비교해보는 것도 재밌을 것 같습니다.

이에 성능 최적화 팀에서는 정량적으로 측정 가능한 지표를 개선하기 보다 '리액트 렌더링 최적화', '대규모 레포지토리 대응'에 집중하기로 했습니다!

요걸 이제 이슈 같은걸로 일단 등록해두시면 좋을 것 같습니다. 다음주부터는 project 안에서 관리해볼 수 있도록 해볼께요.

넵. 이번 주 성능 최적화 팀 Discussion 모두 올린 후에 작업 예정 항목 Issue 생성 하겠습니다 🙌

[seungineer]

#517 내용 한번 검토해주시고, 관련되서 파악이 끝나셨으면 517은 close하셔도 좋을 것 같습니다.

#517 도 참고하여 '리액트 렌더링 최적화' 관련 Issue 생성 후 close 하겠습니다.
감사합니다 😄