[test]: Detail 컴포넌트 가상화 전후 성능 비교 테스트

[chysis]

관련 이슈

#861

테스트 내용 설명

가상화를 적용한 Detail 컴포넌트의 적용 전후 성능을 비교 측정합니다.

• 측정 지표: React 커밋 시간(렌더링 비용 관련), 스크롤 중 FPS & Frame drop rate
• 측정 환경: 동일한 화면 크기와 데이터 크기, CPU 4x throttle, 자동 스크롤 스크립트 작성하여 3회 측정 후 중앙값 비교

참고

No response

[chysis]

성능 측정 지표 수정

기존 성능 측정 지표 중 스크롤 중 FPS & Frame drop rate가 있었습니다.
하지만 FPS는 이미 렌더링된 요소의 스크롤이 얼마나 부드러운지를 측정하는 지표로, 가상화를 통해 직접적으로 개선한 부분은 아니라 판단했습니다.

따라서 가상화를 통해 직접적으로 개선한 부분으로 성능 측정 지표를 수정했습니다.

1. INP(Interaction to Next Paint) - 사용자 상호작용에 따른 화면 업데이트에 걸리는 시간
2. Visible DOM - DOM에 실제로 로드되는 요소의 개수

성능 측정 환경은 다음과 같습니다.

1. 동일한 화면 크기와 데이터 크기(commitItem 500개, 1000개)로 3회 진행, 중앙값 비교
2. CPU throttle 4x slowdown

성능 측정 결과

INP

▲ 가상화 적용 전(위), 후(아래) 측정 결과 (데이터 1000개)

• 사용자 상호작용에 따른 화면 업데이트에 걸리는 시간입니다.
• 개발자 도구의 Performance 탭에서 측정했습니다.

데이터 크기	가상화 적용 전	가상화 적용 후	비고
500	2176ms	428ms	약 80% 감소
1000	4452ms	389ms	약 91% 감소

적용 후에는 데이터의 크기에 비례해서 늘어나지 않고 비슷한 값을 유지하거나 오히려 줄기도 했습니다.

Visible DOM

▲ 가상화 적용 전(위), 후(아래) 측정 결과

• DOM에 실제로 로드되는 요소의 개수입니다.
• 개발자 도구의 Elements 탭에서 확인했습니다.
• 가상화 적용 전에는 모든 아이템이 한 번에 로드됩니다.
• 가상화 적용 후에는 화면에 보이는 영역 근처의 아이템들만 로드됩니다. 아이템마다 높이를 동적으로 계산하기 때문에, 아이템에 따라 한 번에 로드되는 개수는 달라질 수 있습니다.

데이터 크기	가상화 적용 전	가상화 적용 후	비고
500	500	최대 16	약 96% 감소
1000	1000	최대 16	약 98% 감소