1. HTML 파싱과 DOM 트리 구축

<aside> 💡 HTML 파싱: 브라우저는 HTML 파일을 받고 태그들을 해석하여 파싱 DOM 트리 구축: 파싱된 HTML 요소들은 DOM(Document Object Model) 트리로 변환 이 트리는 문서의 구조적 표현이며, JavaScript를 통해 동적으로 조작 가능

</aside>

2. CSS 파싱과 CSSOM 트리 구축

<aside> 💡 CSS 파싱: 브라우저는 모든 CSS를 읽고 CSS 규칙(선택자와 속성)을 파싱 CSSOM 트리 구축: 파싱된 CSS는 CSS 객체 모델(CSSOM) 트리로 변환 CSSOM은 각 DOM 요소에 적용될 스타일을 결정하고, DOM과 병합되어 렌더 트리를 형성하는 데 기여

</aside>

3. 렌더 트리 구축

<aside> 💡 렌더 트리 생성: DOM 트리와 CSSOM 트리가 결합하여 렌더 트리를 형성 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 위치와 크기를 결정하는 데 사용

</aside>

4. 레이아웃(Reflow)

<aside> 💡 레이아웃 계산: 렌더 트리에 기반하여 각 요소의 정확한 위치와 크기가 계산 이 과정은 페이지의 초기 로드 또는 요소의 변화가 있을 때마다 발생 가능

</aside>

5. 페인팅

<aside> 💡 화면에 그리기: 최종적으로 요소들이 화면에 그림 이 단계에서 텍스트 색상, 이미지 등 시각적 요소들이 사용자에게 표시

</aside>

6. JavaScript 처리

<aside> 💡 JavaScript 실행: 웹 페이지와 상호작용하는 JavaScript가 실행 DOM API를 통해 DOM 트리가 변경되면 이 변경사항이 다시 레이아웃과 페인팅 과정을 통해 화면에 반영

</aside>