docs: Day 2 Chrome DevTools Layers 탭을 통한 GPU 가속 시각화 및 검증 #8
Description
🎯 Goal
Day 1에서 구현한 transform 기반 애니메이션이 실제 브라우저 렌더링 엔진 내부에서 어떻게 처리되는지 Chrome DevTools 'Layers' 탭을 통해 시각적으로 검증한다.
🔬 Analysis Method
- CPU Mode (Reflow):
left속성 변경 시 레이어 상태 확인. - GPU Mode (Composite):
transform속성 및will-change적용 시 레이어 분리(Layer Promotion) 여부 확인.
📊 Observations
- CPU Mode: 단일 레이어(
#document)만 존재하며, 매 프레임마다 전체 비트맵이 다시 그려짐(Repaint). - GPU Mode: 각 아이템(
div)이 **개별 레이어(초록색 사각형)**로 승격되어 3D 공간에 분리됨을 확인. - Layers 탭: 3D View를 통해 다수의 텍스처가 VRAM에 로드되어 있음을 시각적으로 확인함.
💡 Conclusion
GPU 가속은 요소를 **별도의 텍스처(Texture)**로 분리하여 메인 스레드의 페인트 작업을 건너뛰게 함으로써 성능을 향상시킨다. 단, 과도한 레이어 생성은 VRAM 사용량을 증가시키므로 주의가 필요하다.
📸 Screenshots
개발자 도구 - Layers 탭
GPU Accelerated
CPU Software Mode
