브라우저 렌더링 과정은 어떻게 되는가?

간략한 브라우저의 렌더링 과정

1. HTML 파일 요청 후 파싱 그리고 DOM트리 생성. 이 과정에서 link 태그를 통해 리소스 다운로드도 함
2. CSS 파싱 후 CSSOM트리 생성
3. DOM 트리, CSSOM트리 합쳐서 렌더 트리 구성
4. 렌더 트리를 가지고 위치와 너비를 계산하는 Layout 진행
5. 색칠하기 (Painting)
6. Composite 레이어 합성하기 (transform과 같은 분리된 레이어를 합치는 과정)

성능을 측정하는 도구는 어떤 것이 있는가?

고전 방식

DOMContentLoaded

DOM 파싱과 CSS파싱이 완료되고 렌더트리 구축이 가능한 시점.

Load

HTML 상에 모든 리소스 로드가 완료된 시점.

좋은 지표 기준

DOMContentLoaded와 Load 이벤트의 차이가 적고, 두 이벤트 모두 빠르게 완료되는 것이 성능이 좋다고 본다.

한계

SPA로 넘어오면서 HTML은 단순해지고 JS에 의한 DOM생성 및 스타일 계산이 많아져서 좋은 지표는 아님

최신 방식