## `Render`란? 브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변환하는 작업. 웹페이지가 표시되는 단계인 `탐색` > `응답`>`구문 분석(Parsing)`> `렌더` 중 마지막 단계에 해당한다. 직전 단계인 [[1. Parsing|구문 분석]] 단계에서 생성된 DOM 트리와 CSSOM 트리를 바탕으로 이뤄진다.[^1] ## `Render`의 작동 방식 ![[Pasted image 20231107095847.png]][^1] Render 작업은 Render 트리 생성 > 레이아웃 > 페인팅(Painting)으로 나누어 진행된다. ### Render 트리 생성 #### 1. DOM 트리 순회 DOM 트리의 루트 노드(html)부터 트리를 순회하며 Render 트리를 생성한다. 이때 script나 meta 와 같은 노드는 화면에 출력되지 않기 때문에 Render 트리에 추가하지 않는다. #### 2. CSSOM 규칙 적용 CSSOM 트리도 똑같이 순회하며 Render 트리를 생성한다. 이때 CSS 속성에 따라 Render 트리에서 노드가 누락되기도 한다. CSS 속성 중 `display : none` 이 Render 트리에서 해당 노드를 누락시키는 속성이다. #### 3. 콘텐츠 및 계산된 스타일 노드 내보내기 위의 그림에서 'Hello' 같은 노드가 예시이다. `DOM객체.textContent = ...` 식으로 값을 설정하는 것이 이 콘텐츠를 수정한 것이다. ### 레이아웃 ![[Pasted image 20231107102930.png]][^1] Render 트리를 루트 노드부터 순회하며, 각 노드의 정확한 위치와 크기를 계산하는 작업이다. 이때 상자 모델을 기준으로 출력되며 `50%` 같은 상대적인 측정값은 절대적인 픽셀 기준으로 변환이 된다. ### 페인팅 레이아웃 단계에서 계산된 값을 바탕으로 각 노드를 실제 화면의 픽셀로 변환하는 작업이다. 레이아웃이 끝나면 브라우저가 `Paint Setup`과 `Paint` 이벤트를 발생시키는데, 이때 수행된다. ## Reference [^1]:https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko