26 · FPS·Draw Calls·메모리 분석
4주 차 / 원문 Day 26 · 문서·예제 제공 · 고정된 하루 분량이 아닌 학습 순서입니다.
목표
재현 가능한 조건에서 성능 기준선을 기록한다.
선수 지식
07, 18, 22.
핵심 개념과 설명
기기·브라우저·viewport·DPR·데이터·카메라 경로·워밍업·측정 시간을 고정합니다. 평균 FPS뿐 아니라 프레임 시간 분포와 긴 프레임을 관찰합니다. JavaScript 실행 시간은 GPU 시간과 같지 않습니다.
renderer.info.render.calls와 triangles는 렌더 작업의 일부 지표입니다. renderer.info.memory.geometries/textures는 객체 카운터이며 실제 총 GPU VRAM 측정이 아닙니다. 브라우저·드라이버 캐시도 있어 해제 직후 OS 메모리가 줄지 않을 수 있습니다.
학습 후 얻을 역량
- 재현 가능한 조건에서 성능 기준선을 기록한다.
- 아래 완료 조건을 재현하고 자가 점검 질문에 자신의 말로 답할 수 있습니다.
실습 과제
- pnpm build 후 pnpm preview에서 대표 경로를 정합니다.
- docs/performance.md의 조건과 관찰 도구를 채웁니다.
- 동일 경로를 여러 번 측정하고 로딩·CPU 갱신·렌더링 구간을 구분합니다.
관찰할 변수
기준선에서는 조건을 고정합니다. 의도적으로 바꾸는 변수는 아직 없습니다.
완료 조건
- 측정 조건을 재현 가능하게 적었다.
- 반복 결과와 변동을 기록했다.
- renderer.info와 총 VRAM을 구분했다.
자가 점검 질문
- FPS가 같아도 체감이 다를 수 있나요?
- 메모리가 바로 줄지 않으면 항상 누수인가요?
공식 참고
실험 기록 — 직접 작성
목표
핵심 개념
바꾼 변수와 예상
실제 결과
배운 점
남은 질문
이전: 마커와 Raycasting · 다음: 해상도·데이터 최적화
연결된 예제와 실행 범위
원본 실행 코드 · 화면 단위 ID: 26-performance
연결된 원본 코드를 Monaco에서 편집하면 검사 후 sandbox 미리보기에 반영됩니다. 확장 과제와 완료 조건은 직접 수행하고 결과를 기록하세요.
기존에 저장한 코드가 있으면 그대로 유지합니다. 새 원본을 사용하려면 먼저 전체 JSON으로 백업한 뒤 원본 코드로를 선택하세요. 필기는 지워지지 않습니다.