사전 지식

DOM

DOM이란 HTML문서의 tag들을 js가 이용할 수 있는 객체형태로 변환한 모델

CSSOM

HTML 문서에 적용된 CSS 스타일을 DOM과 병합해 만들어진 모델

Render Tree

DOM과 CSSOM을 합쳐서 최종적으로 브라우저에 보여지는 Render Tree가 생성된다.

• Render Tree에는 html의 head 부분이나 css style로 브라우저에 보여지지 않게 만든 요소들은 보이지 않는다.

---

critical rendering path

웹사이트의 렌더링 순서이며 브라우저 html파일을 웹페이지에 띄우는 일련의 과정이다.

• critical rendering path에는 크게 construction part와 operation part로 나눌 수 있다.

construction 과정

1. request/response - 브라우저가 서버로 html 파일을 요청하고 받는다.
2. load - 요청한 파일을 로드한다.
3. script - 받아온 파일을 DOM과 CSSOM으로 변환한다.
4. render - DOM과 CSSOM을 합쳐서 render tree를 만든다.

operation 과정

1. layout - render tree의 각각의 요소들의 위치를 배치 시킨다.
2. paint - 각각의 요소들을 layer별로 나눠서 구분시켜준다.
3. composite - 최종적으로 layer별로 구분된 요소들을 하나씩 웹페이지에 올려 사용자에게 웹페이지 보여준다.

---

rendering 성능 보장을 위해 생각할 점

1. construction 과정이 빨라야 한다. 과정이 빠르려면 render tree의 크기가 크지 않으면 된다. 즉 render tree를 만드는 과정에서 불필요한 요소들이 생성되선 안된다. (ex. 불필요한 div태그 사용)

2. css 스타일을 조정할 때 layout,paint과정이 다시 일어나서는 안된다.
   layout부터 다시 시작되면 변화가 일어나지 않은 다른 요소들도 재배치 되어야 하기 때문에 성능 개선에 좋지 않다.
   css 속성의 성능과 관련된 부분은 아래 링크를 참조하자.
   css trigers - https://www.lmame-geek.com/css-triggers/