렌더링이란?

정의

서버로부터 HTML 파일을 받아 브라우저에 표현하는 과정

 

흐름

1) 브라우저가 서버로부터 HTML문서를 다운로드

2) 렌더링 엔진이 HTML 문서를 파싱하여 DOM 트리를 형성

3) 외부 css파일과 HTML 내 스타일 요소를 파싱하여 CSSOM 트리를 형성

* 브라우저의 자체 스타일, 사용자 정의 스타일, HTML 태그의 스타일 순서로 처리하며,

  중복 시, 나중에 처리되는 스타일을 따른다. 즉, 인라인 스타일 속성이 우선

4) DOM과 CSSOM 트리가 결합하여 렌더링 트리를 형성

* 화면에 드러나지 않는 head태그, display 속성에 none 값이 할당된 요소는 포함되지 않는다.

5) 기기의 뷰포트 내에서 노드들의 정확한 위치와 크기를 계산하는 레이아웃 혹은 리플로우 단계를 진행

* 각 객체의 정확한 크기, 위치를 파악하기 위해 브라우저는 렌더링 트리를 루트부터 순회

6) 렌더링 엔진은 각 요소의 배치장소와 크기에 따라 페인트 이벤트를 발생시켜

    렌더링 트리를 화면에 표현하는 페인팅 혹은 래스터화 단계를 진행

* 페이지가 한꺼번에 그려지지 않는 것은 모든 HTML을 파싱할 때까지 기다리지 않고

  배치와 그리기 과정을 진행하기 때문

 

출처 : velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80

HTML 기초 - 3 (렌더링이란?)