브라우저의 렌더링 과정

1. DOM, CSSOM 생성

- 서버로부터 HTML, CSS를 다운로드 받는다

- HTML 태그를 파싱해 DOM tree를 구성한다

- CSS 파일을 CSSOM으로 변환한다

 

2. Render tree 생성

- DOM과 CSSOM을 가지고 실제 화면에 표현되는 노드들로만 구성된 Render tree를 만든다

- 스크립트 태그, 메타 태그와 같은 것들은 화면에 표현되는 것이 아니므로 생략된다

- display:none과 같이 CSS를 통해 숨겨진 노드들은 렌더링 트리에 들어가지 않는다

DOM, CSSOM 트리가 결합되어 렌더링 트리가 된다(출처:구글 개발자 문서)

3. Layout

Render Tree를 생성하는 것이 화면에 표시할 노드와 해당 노드의 스타일을 계산하는 과정이었다면, 다음으로는 각 노드들이 화면에서 어느 위치에, 어떤 크기로 출력될지 계산하는 레이아웃 과정을 거치게 된다

 

4. Paint

렌더링 트리의 각 노드를 화면에 보여질 실제 픽셀로 변환해 화면에 렌더링 한다

 

[ 용어해설 - 출처 : MDN ]

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

(웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법)

 

CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.