[JSP&Javascript] HTML 렌더링 과정

웹 브라우저 상에서 HTML 문서가 렌더링 되어서 최종 사용자에게 보여지기까지 어떤 과정이 있을까요 ?

1. 웹에서 로더가 서버로부터 받은 파일들을 읽게 됩니다. 파일들을 받을 것인지 등을 결정합니다.

2. 웹 엔진에 존재하는 HTML/XML 파서가 문서를 파싱 한 후 DOM Tree를 구성합니다.

 -> DOM Tree 객체 구성

(출처 : https://isme2n.github.io/devlog/2017/07/06/browser-rendering/)

웹 브라우저 상의 DOM Tree 구성을 확인하고 싶다면 개발자도구(F12) 의 Elements에서 우측 Properties를 확인합니다.

3. DOM Tree는 자바스크립트 에서 접근할 때 DOM 객체를 사용할 때 사용하는 것이고, 실제로 화면에 그려지기 위한 Tree가 만들어 져야 되는데, 이것이 Rendering Tree 입니다. (아래 그림) 실제로 모든 노드의 콘텐츠 및 스타일 정보를 

포함합니다.

-> Rendering Tree 객체 구성

4.  모든 CSS 스타일을 분석 후 스타일 규칙이 적용되도록 CSS를 결정합니다.(아래 그림) -> CSSOM

CSSOM과 DOM을 결합시킨것이 Render Tree가 됩니다.

-> CSSOM 객체 구성

5. Render 트리는 CSSOM과 DOM을 결합한 것이라고 위에서 언급했습니다.

렌더링 트리가 생성되고 난 후 레이아웃(Layout) 단계로 진행하게 됩니다.

레이아웃 단계는, 렌더링 트리에서 각 위치나 크기를 가지고 있지 않기 때문에 위치 파악 및 크기를 정해주는 과정을 실행합니다.

6. 페인트(Paint)단계가 옵니다. 말그대로 실제로 화면상에 그려주는 작업을 합니다. (픽셀 뿌려주기)

웹상에 픽셀이 뿌려진 뒤, CSS의 색이나 스타일이 바뀌는 것만으로는 레이아웃(Layout)단계를 다시 거치지 않고

페인트(Paint) 만 일어납니다.

최종 요약

1. HTML 마크업을 처리 후 DOM 트리 빌드

2. CSS 마크업을 처리 후 CSSOM 트리 빌드

3. DOM 및 CSSOM을 결합하여 Rendering Tree 형성

4. Rendering Tree에서 레이아웃 실행 후 각 노드 크기 및 위치를 배치

5. 개별 노드를 화면에 페인트시킴