## 🎯 Goal Day 1에서 구현한 `transform` 기반 애니메이션이 실제 브라우저 렌더링 엔진 내부에서 어떻게 처리되는지 **Chrome DevTools 'Layers' 탭**을 통해 시각적으로 검증한다. ## 🔬 Analysis Method 1. **CPU Mode (Reflow):** `left` 속성 변경 시 레이어 상태 확인. 2. **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 <img width="922" height="868" alt="Image" src="https://github.com/user-attachments/assets/84fba11b-309a-4547-a6c2-0bc753d229cc" /> <img width="583" height="312" alt="Image" src="https://github.com/user-attachments/assets/99148c72-3d2e-43db-b15c-1bd1fd00cd00" /> ---- #### CPU Software Mode <img width="927" height="868" alt="Image" src="https://github.com/user-attachments/assets/d4e6cea2-0d77-4158-a283-7525ad8f864b" /> <img width="573" height="300" alt="Image" src="https://github.com/user-attachments/assets/42fdb091-f45c-4c9c-b50e-1ae313d20938" />
🎯 Goal
Day 1에서 구현한
transform기반 애니메이션이 실제 브라우저 렌더링 엔진 내부에서 어떻게 처리되는지 Chrome DevTools 'Layers' 탭을 통해 시각적으로 검증한다.🔬 Analysis Method
left속성 변경 시 레이어 상태 확인.transform속성 및will-change적용 시 레이어 분리(Layer Promotion) 여부 확인.📊 Observations
#document)만 존재하며, 매 프레임마다 전체 비트맵이 다시 그려짐(Repaint).div)이 **개별 레이어(초록색 사각형)**로 승격되어 3D 공간에 분리됨을 확인.💡 Conclusion
GPU 가속은 요소를 **별도의 텍스처(Texture)**로 분리하여 메인 스레드의 페인트 작업을 건너뛰게 함으로써 성능을 향상시킨다. 단, 과도한 레이어 생성은 VRAM 사용량을 증가시키므로 주의가 필요하다.
📸 Screenshots
개발자 도구 - Layers 탭
GPU Accelerated
CPU Software Mode