[Web] Rendering (DOM/CSSOM/Render Tree)

DOM(Document Object Model)

브라우저가 Html파일을 읽을 때 브라우저가 이해할 수 있는, 

메모리에 보관할 수 있는 object로 변환시킨다.

object로 변환된 후 Tree 구조를 생성한다. 이것이 DOM이다.

Document Object Model안에는 우리가 정의한 요소들이 tree형태로 구성되어져 있다.

이것을 이용해서 JavaScript로 웹페이지를 제어할 수 있다.

 

MDN DOM

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

 

 

CSSOM(CSS Object Model)

브라우저는 html파일을 Domcument Object Model로 만들면서

우리가 정의한 CSS뿐 아니라 브라우저에서 기본적으로 설정되어 있는 CSS를

cascading룰에 따라 병합하여 CSSOM을 만들게 된다.

 DOM + CSS -> CSSOM 

 

MDN CSSOM

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model

 

Render Tree

브라우저가 html 파일을 읽게 되면 제일 먼저 DOM(Document Object Model) 트리를 만들고,

그 다음 CSS파일을 읽은 다음 모든 CSS를 계산해서 최종적으로 확정된 CSS 스타일 트리를 만든다.

그러고 나면 브라우저에 표시될 요소들만 Render 트리에 선별 해서 표시한다.

요소의 display가 none으로 설정이 되어 있으면 최종 Render Tree에는 포함되지 않지만, 요소의 opacity가 0이라던가 visibility가 hidden 으로 설정 되어 있으면 사용자의 눈에 보이지는 않지만 요소자체가 없어진 것은 아니기 때문에 Render Tree에 포함된다.

 

 DOM + CSSOM -> Render Tree 

 

---

렌더링 순서

 

 

requests / response : 브라우저가 서버에게 HTML파일을 요청

loading : 서버에게서 HTML파일을 받아 loading

scripting : html파일을 DOM요소로, CSS파일을 CSSOM요소로 변환

rendering : 최종적으로 브라우저에 보여질 요소들로만 Render Tree 생성

layout : 각 요소들이 가지고 있는 스타일에 따라 브라우저 화면에서의 위치와 크기를 계산

printing : layout 계산이 완료되면 요소들을 브라우저에 표시

렌더링 과정을 카테고리로 나누면

construction part

DOM -> CSSOM -> Render Tree

html을 브라우저가 이해할 수 있는 언어로 변환하는 과정

 

operation part

layout -> paint -> composition

Render Tree를 이용해서 각 요소들의 위치와 크기, 구조를 계산한 다음 브라우저에 나타내는 과정

 

layout : Render Tree를 이용해서 layout을 구상한다.

 

paint

layout에서 계산한 요소들을 바로 브라우저에 표시하는 것이 아니라

요소들을 어떻게 배치했는냐에 따라서 요소들을 조금씩 나누어서 이미지를 준비한다.

즉 레이어별로 요소들을 준비만 한다. 이것은 브라우저의 성능 개선을 위한 것이다.

브라우저의 한 부분만을 움직이거나 변환시킬 때

웹페이지 전체를 다시 업데이트하는 것이 아니라 특정 레이어만 업데이트하면 된다.

그래서 CSS에 will-change라는 속성값이 있다. will-change는 브라우저에게 요소의 opacity값이 변경될 수 있음을 미리 알려서 새로운 레이어에다가 추가해 놓을 수 있도록 한다. will-change 속성을 많이 쓰면 레이어가 많이 만들어지기 때문에 꼭 필요할 때만 사용해야 한다.

 

composition : 준비된 레이어를 브라우저 위에 순서대로 표시한다.

z-index가 낮은 요소를 먼저 올리고, z-index가 높은 요소를 제일 나중에 올린다.

 

⭐ POINT!!⭐

construction part에서 어떻게 하면 html을 Render tree로 빠르게 만들 수 있을까?

DOM요소와 CSS규칙이 적을수록 빠르다.

불필요한 태그는 사용, div 태그의 남용, 쓸데없는 wrapping class, wrapping 요소 사용을 자제한다.

 

operation part에서는 사용자가 클릭을 해서 요소를 움직이거나 애니메이션을 쓸 때,

paint가 자주 발생하지 않도록 만드는 것이 중요하다.

예를들어 box를 이동할때 top, left 등의 속성을 사용하면 paint뿐 아니라 layout부터 다시 발생한다.

하지만 translate을 사용하게 되면 composition만 일어난다.

 

const x = event.clientX;
const y = event.clientY;

// Bad
vertical.style.left = `${x}px`;
horozontal.style.top = `${y}px`;

// Good
vertical.style.transform = `translateX(${x}px)`;
horozontal.style.transform = `translateY(${y}px)`;

 

 

 

 

본 포스팅은 개인 공부 목적으로 작성된 글입니다.