# 브라우저 렌더링 동작과정을 짧게 설명해보세요.
요약
HTML 파싱(DOM 트리), CSS 파싱(스타일 구조체) ↓ 렌더 트리 생성 ↓ 렌더링 위치 계산 ↓ 페인트 ↓ 렌더링 끝!
브라우저는 렌더링 엔진을 통해 렌더링 과정을 거치며, 아래 동작을 순차적으로 수행해 렌더링을 마친다.
렌더링 엔진은 HTML 문서를 파싱해 DOM 노드로 변환하여 태그 트리로 이뤄진 DOM 트리를 구축한다. 이와 동시에 참조된 CSS 파일을 포함한 스타일 요소를 파싱하는데, 스타일 요소는 브라우저 기본 스타일, 사용자 정의 스타일, HTML 내부 style 속성 순으로 파싱되어 적용되며 스타일 구조체를 생성한다. 이러한 스타일 정보(스타일 구조체)와 HTML 표시(DOM 트리)를 통해 '렌더 트리'라는 새로운 트리를 생성한다.
렌더 트리는 DOM과는 다르게 각 노드에 스타일 정보가 저장되어있고, 화면에 표현되는 노드로 구성된다. 즉, display:none인 경우는 렌더 트리에 포함되지 않는다.
렌더 트리는 화면에 표현되는 노드로만 구성되기 때문에
<head>,<title>,<script>등은 포함되지 않는 요소이다.
렌더 트리의 생성이 끝나면 시각적 속성을 저장하고 있는 스타일 요소에 맞게 화면에 배치하기 위해 위치를 계산하고, 렌더링 엔진은 요소의 표현 위치를 알게 되었으므로 렌더 트리를 순회하면서 화면에 그려서(Paint) 최초 렌더링을 마친다.
이후 비동기 통신 등으로 인해 DOM 구조가 변경되는 작업은 리플로(Reflow, 배치를 다시 하는 작업) 또는 리페인트(Repaint, 단순한 스타일 변경 작업)라고 한다.
cf) 렌더링 엔진은 좀 더 나은 사용자 경험(UX)를 위해 가능하면 빠르게 내용을 표시하는데, 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기를 시작한다. 네트워크로부터 나머지 내용이 전송되길 기다리는 동시에, 받은 내용의 일부를 먼저 화면에 표시하는 것이다.