📁DOM 과 브라우저 렌더링 과정

 

오늘은 기본적이지만 중요한 내용인 DOM에 관련된 개념과 브라우저 렌더링 과정에 대해서 정리해 보려고 한다.

 

DOM(Document Object Model)이란, 우리가 html 파일을 만들면, 브라우저에서 html 파일을 읽게된다.

브라우저 에서는 html 파일을 읽을때 body,section,img,h1 태그등 각각의 태그들을 분석해서 노드(Node)로 변환하게 된다. 즉, 브라우저가 이해할 수 있는 자신들만의 obj로 변환하게 되는 것이다.

 

(=HTML 파일의 tag가 Node라는 obj로 변환이 되는것이다!)

=> Node의 obj에는 태그에 들어있는 cls나 텍스트 정보들이 포함되어져 있다!!!

 

👉 자세히 정리해보자면,

1. Node라는 obj는 Event Target obj를 상속한다. (즉, 모든 Node는 Event Target의 obj 라는것을 의미하며 모든 Node는 이벤가 발생할 수 있음을 의미한다.)
2. document는 Node를 상속하기 때문에 document => Node => Event Target 이고, document 에서도 이벤트가 발생된다.
3. HTML 요소들은 Element로 변환이되고, 즉 Element도 Node이기 때문에 Element도 이벤트가 발생된다.
4. HTML Element 와 타입별 Element도 동일하게 적용된다.

-> 즉, 모든 Node는 Event Target 이다.

 

🎄 DOM Tree

- DOM Tree는 브라우저가 html 요소를 한줄씩 읽어 나가면서 자신들이 잘 이해할 수 있도록 tree 구조로 만들어 나가는것을 의미한다. (메모리에 보관할 수 있는 오브젝트로 변환하게되고, 구조는 나무와 비슷한 형태로 맵핑되어져 있다.)

 

🎄 CSSOM 

- CSSOM은 HTML의 DOM TREE를 만들고 style의 모든 값들을 계산해서 CSSOM을 만든다.

 

🎄 Render Tree

- Render Tree는 DOM과 CSSOM을 합해서 최종적으로 브라우저에 표기될 요소들만 Render Tree에 선별되어 표기되어진다.

(🖐 만약 html에 section을 css에서 display:none;으로 설정했을시, Render Tree에는 포함되지 않는다.

반면에, opacity:0 이나 visibility:hidden 같은 경우에는 투명도가 0이고 visibility는 속성이 hidden 이기 때문에 Render Tree 포함이된다.)

 

⭐Rendering 순서 

URI를 브라우저에 요청하면 아래 순서대로 렌더가 진행된다.

requests/response -> loading -> scripting -> rendering -> layout -> painting -> composition 

 

<construction part> 

html 페이지에서 브라우저가 이해할 수 있도록 브라우저의 언어로 바꾸는 단계

 

1. requests/response : 브라우저가 서버에게 html 파일을 요청 / html 파일을 서버로부터 받음

2. loading : html 파일 로딩

3. scripting : 로딩된 html을 한줄씩 읽어서 DOM요소로 변환 + CSS를 CSSOM으로 변환

4. rendering : 브라우저, window에 표기를 하기위해 준비, Render tree를 만듦

 

<operation part> 

이해할 수 있는 Render tree를 이용해서 구조를 작성하고 어디에 배치할건지 계산 후 실제로 window에 그림을 그려주는단계

 

5. layout : 각각 요소들이 어떤 위치에 있는지 얼마나 크게 표기가 될지 계산 

6. painting : renderingt시 계산된대로 그림을 그리는 단계

7. composition : 브라우저 window에 실제로 표기하는 단계

 

🙌 성능좋은 rendering이 되게끔 코딩하는 방법❓

위에서 정리했듯이 서버에서 받은 html 문서를 읽어서 reder tree로 변환해서 띄우는 것 이기 때문에,

DOM요소가 작으면 작을수록, CSS 규칙이 작으면 작을수록 TREE가 작아지기 때문에 빠르게 만들 수 있다.

그래서 불필요한 태그나 div를 남용하거나 wrapping cls나 wrapping 요소를 만드는 등등의 일들을 최대한 자제해서 

요소들을 작게 만드는것이 중요하다고 한다.

렌더링 과정을 공부해보니 최적화가 왜 중요한지 알게되는 계기가 된 것같다.