브라우저 렌더링 파이프라인
파싱, 레이아웃, 페인트, 합성과 성능 최적화를 시각화합니다
- 01
HTML/CSS 파싱과 DOM/CSSOM
바이트 스트림이 DOM·CSSOM 트리가 되는 과정을 시각화합니다
- 02
렌더 트리와 레이아웃
DOM과 CSSOM이 만나 위치와 크기가 결정되는 과정을 시각화합니다
- 03
페인팅과 래스터라이제이션
페인트 레코드, 스태킹 컨텍스트, 래스터라이제이션을 시각화합니다
- 04
합성과 GPU 레이어
합성 스레드, 레이어 승격, GPU 합성을 시각화합니다
- 05
Reflow와 Repaint 최적화
어떤 변경이 어떤 단계를 다시 트리거하는지 시각화합니다
- 06
성능 측정과 디버깅
DevTools Performance와 Layers 패널로 병목을 찾는 방법을 시각화합니다