렌더링

렌더링

서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

동작과정

1. HTML 파일을 파싱하여 DOM 트리를 만든다.

2. CSS를 파싱하여 CSSOM 트리를 만든다.

   • 스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, HTML 태그에 걸려있는 스타일 순서대로 처리되며, 나중에 처리되는 스타일을 따르게 된다.
   • 인라인으로 들어가 있는 스타일 속성이 우선순위를 갖게 된다.

3. DOM과 CSSOM을 결합하여 렌더링 트리를 만든다.

   • 화면에 드러나지 않는 head 태그나 display 속성에 none값이 할당 된 요소는 렌더링 트리에 포함되지 않는다.

4. 렌더링 트리에서 각 노드의 크기와 위치를 계산한다.

   • 이 과정을 레이아웃 단계 또는 리플로우라고 한다.
   • 페이지에서 각 개체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리를 순회한다.
   • 렌더링 엔진은 각 요소가 어디에 어떤 위치로 표현될지 알 수 있다.

5. 개별 노드를 화면에 그린다.

   • 렌더링 엔진은 페인트 이벤트를 발생시켜 렌더링 트리를 화면에 그린다.
   • 이 과정을 페인팅 또는 래스터화라고 한다.
   • 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기를 진행하기 때문에 웹 페이지에 접속했을 때, 페이지가 한번에 뜨지 않고 점점 화면에 그려진다.