DOM

 

웹 페이지가 그려지는 과정

 

먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 한다.

 

Critical Rendering Path

 

 

브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 Critical Rendering Path, CPR이라고 한다.

 

CRP의 6단계 과정

• DOM  ( Document Object Model ) 트리 구축  
• CSSSOM ( CSS Object Model )트리 구축
• JavaScript 실행
• 렌더 트리 구축
• 레이아웃 생성
• 페인팅

위와 같이 CRP 과정은 6단계로 나누어져 있지만 대략 렌더 트리 구축을 기점으로 두 단계로 나눌 수 있다.

 

• 첫번째 단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정한다. 
• 두번째 단계 : 브라우저는 해당 렌더링을 수행한다.

 

렌더 트리 ( Render Tree )

렌더 트리란 웹 페이지에 표시될 HTML요소들과 이와 관련된 스타일 요소들로 구성된다. 브라우저는 렌더 트리를 생성하기 위해 아래와 같이 두 모델이 필요하다.

• DOM(Document Object Model) : HTML 요소들의 구조화된 표현
• CSSOM(Cascading Style Sheets Object Model) : 요소들과 연관된 스타일 정보의 구조화된 표현

렌더 트리는 오직 보여지는 콘텐츠만은 캡쳐합니다. (일반적으로) 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 렌더트리 안에 포함되지 않습니다. 만약 요소에 display: none 이 적용되어 있다면, 해당 요소 또는 하위 요소는 포함되지 않습니다.

 

레이아웃 ( Layout )

 

일단 렌더 트리가 생성되고 나면, 레이아웃은 가능해지며 화면의 크기에 의존합니다. 레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정합니다.

 

레이아웃 성능은 DOM의 영향을 받습니다. 노드의 수가 많을수록 레이아웃은 더 길어지며 스크롤링 또는 다른 애니메이션들이 필요하다면 레이아웃에 쟁크(jank)를 일으키는 병목현상이 발생할 수 있습니다.

 

 

 

페인팅 ( Paint )

마자믹 단계는 화면에 픽셀을 그리는 것입니다. 일단 렌더 트리가 생성되고 레이아웃나 나타나기 시작하면, 화면에 픽셀을 그릴수 있습니다. 로드시, 전체 화면을 그립니다. 그 후에는 브라우저가 필요한 최소 영역만을 다시 그리도록 최적화되어 있기 때문에 영향을 받는 영역만을 화면에 다시 그립니다.

그리는 시간은 렌터 트리에 적용되는 업데이트의 종류가 무엇있냐에 따라 달라지지만 레이아웃과 리페인트 시간을 모두 고려하는 것이 중요합니다.

 

 

DOM (Document Object Model)

DOM ( The Document Object Model ) 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.

DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

 

 

1. DOM의 생성 방식

 

DOM은 원본 HTML 문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 노드 트리(하나의 부모 줄기가 여러개의 자식 나뭇가지, 나뭇잎들을 가질 수 있는 나무와 같은 구조)로 표현된다.

 

 

2. DOM과 HTML의 차이점

DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지 않다.

 

• HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다.  (최초에 화면을 그릴때 사용하는 설계도)

• DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

 

3. DOM은 브라우저에서 보이는 것이 아니다.

 

브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다. 렌더 트리는 오직 렌더링 되는 요소만 관련이 있고 스크린에 그려지는 것으로 구성되어 있어 시각적으로 보이지 않는 요소들은 제외되기 때문에 DOM과는 다르다.

 

 

 

4.  DOM 의 단점

HTML DOM은 HTML 문서에서 허용되는 구조 트리이다 이것은 우리가 HTML 구조에  쉽게 접근, 제어 할 수 있는 방법이다.  

그러나 불행히도 여기서 접근이 쉽다는 것은 페이징 렌더의 속도가  빨르다는 것을  의미하지는 않는다.

 

오늘날 DOM 트리는 거대해 졌다 또한 점점 더 동적 웹 앱( Single Page Applications - SPA)의 개발을 지향하고 있기 때문에 DOM 트리를 끊임없이 그리고 많이 수정해야 한다.

 

이때 목록을 다시 작성하는 것은 웹 브라우저에 큰 문제가 아니지만 비효율적인 업데이트이고 성능 저하의 심각한 문제가 발생되게 된다.

이러한 문제를 해결하기 위하여 나온것이 바로 Vitrual DOM 이다

 

Vitrual DOM 은 React에서 발명한 것이 아니지만 React에서 사용하고 무료로 제공하여 대중적으로 사용하게 되었다.

 

 

Vitrual DOM

 

Vitrual DOM은 HTML DOM의 추상화이다 가볍고 브라우저별 구현 세부 정보와 분리되어 있다. DOM 자체가 이미 추상화였기 때문에 가상 DOM은 사실 추상화의 추상화이다

 

아마도 Vitrual DOM을 HTML DOM의 React의 로컬 및 단순화된 사본으로 생각하는 것이 더 나을 것이다. 이를 통해 React는 이 추상적인 세계 내에서 계산을 수행하고 종종 느리고 브라우저에 따라 달라지는 "Real" DOM ​​작업을 건너뛸 수 있다

 

"Real" DOM과 Virtual DOM 사이에는 큰 차이가 없다. 이것이 React 코드의 JSX 부분이 순수한 HTML처럼 보일 수 있는 이유이다.

 

 

 

 

 

 

 

 

 

 

 

- 참조 

- DOM

https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

https://velog.io/@surim014/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

- Vitrual DOM

https://www.codecademy.com/articles/react-virtual-dom

https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/