DOM 랜더링

브라우저 랜더링
브라우저는 랜더링 엔진을 통해 웹 페이지를 불러온다.
렌더링 엔진은 HTML, CSS, JavaScript를 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다.

브라우저 랜더링 과정

1. HTML 파싱

• 브라우저는 HTML 파일을 불러들이고 이를 통해 DOM 트리 형성
• SSR의 경우 HTMl 파일을 서버에서 생성 후 브라우저에 전달하고, 브라우저는 이를 통해 DOM 트리 형성

2. CSS 파싱

• CSS 파싱을 통해 CSSOM(Cascade Styles sheet Object Model) 생성

3. 랜더 트리(Render tree) 생성

• DOM 트리와 스타일 규칙을 결합하여 랜더트리를 생성
• 

4. 배치 (Layout 또는 reflow)

• 랜더 트리를 기반으로 각 요소의 크기(width, height), 위치가 계산됨

5. 그리기 (Painting 또는 repaint)

• Layout 단계에서 계산된 정보를 기반으로 브라우저는 각 요소를 픽셀로 변환하여 화면에 그립니다.
  이 과정에서 요소의 색상, 배경, 글꼴 등이 화면에 표시됩니다.

• Critical Rendering Path:
  위 과정을 간략하게 보여줌
  

➡️ Render Tree와 DOM의 차이
랜더 트리에 경우, 화면에 표시될 요소만 포함함.
즉 display: none; 와 같은 속성을 가진 태그는 포함되지 않음
(DOM은 모든 요소를 포함함)

출처
https://d2.naver.com/helloworld/59361