브라우저 렌더링 파이프라인

HTML이 픽셀이 되기까지, 파싱, 레이아웃, 페인트, 합성, 그리고 성능 최적화를 시각화합니다

1. 01

   HTML/CSS 파싱과 DOM/CSSOM

   바이트 스트림이 트리 구조가 되기까지, HTML 토크나이저, DOM 트리, CSSOM 트리, 파서 블로킹을 시각화합니다

2. 02

   렌더 트리와 레이아웃

   DOM과 CSSOM이 만나 렌더 트리가 되고, 각 요소의 위치와 크기가 결정되는 레이아웃 과정을 시각화합니다

3. 03

   페인팅: 픽셀로 변환

   레이아웃 결과가 실제 픽셀이 되기까지, 페인트 레코드, 스태킹 컨텍스트, 래스터라이제이션을 시각화합니다

4. 04

   합성과 GPU 레이어

   메인 스레드를 벗어나는 마법, 합성 스레드, 레이어 승격, GPU 합성을 시각화합니다

5. 05

   Reflow와 Repaint 최적화

   어떤 변경이 파이프라인의 어떤 단계를 다시 트리거하는가, Layout Thrashing 방지와 CSS 최적화를 시각화합니다

6. 06

   성능 측정과 디버깅

   렌더링 성능을 측정하고 병목을 찾는 방법, DevTools Performance, Layers 패널, Core Web Vitals를 시각화합니다