DOM이란?

- HTML을 이용한 화면에 UI 표현하기

 

브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있다.

이 HTML은 요소(Element)로 구성되어 있다.

 

 

 

- DOM이란? (Document Object Model)

 

Window 객체 안에 Document 객체가 있다. => window.document

window 자체를 브라우저에서 제공하는 것이므로 window.document도 브라우저에서 제공하는 것이다.

(자바스크립트 코드 안에 있지만 자바스크립트 코드가 아니다)

 

DOM(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서

웹 브라우저가 HTML 페이지를 인식하게 해준다.

 또한 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔
브라우저가 트리구조로 만든 객체 모델을 의미한다.

 

 

 

- DOM 조작

 

위에 보이는 DOM 트리를 DOM에서 제공하는 API를 사용하여 조작할 수 있다.

이 API를 사용하여 DOM 구조에 접근하거나 원하는 요소(Element)를 수정하거나 없애거나 할 수 있다.

 

 

 

- 웹 페이지 빌드 과정(Critical Rendering Path : CRP)

 

이렇게 DOM을 조작해서 화면을 변경시켜줄 때

브라우저 내에서는 어떠한 과정을 통하여 바뀐 화면을 변경시켜주는지 알아보자.

 

브라우저가 Server에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.

웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정이다.

 

 

1. HTML을 DOM으로 만든다.(트리구조로 만든 객체 모델) => 이제 자바스크립트가 DOM을 이용할 수 있다.

2. 스타일링된 CSS 역시 CSSOM으로 만든다(CSS 객체 모델)

3. DOM과 CSSOM을 결합해주는 부분이 바로 Render Tree.

화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력한다.

4. 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계가 Layout.

5. 마지막으로 실제 화면에 그려주는 Paint 작업을 진행.

 

=> 화면에 무언가 보여주거나 변경이 일어날 때 이 과정이 지속적으로 일어나게 된다.

 

 

 

- 그런데 만약 웹 페이지 빌드 과정, 즉 CRP가 너무 많아지면 어떻게 될까?

 

현재 DOM을 조작하거나 업데이트할 때마다 이 과정이 계속 일어나고 있다.

Render Tree, Layout, Paint 부분은 굉장히 비용이 많이 든다.

=> 이 부분을 최소화해야지 성능이 좋아질 수 있다.

(React는 최소화를 위하여 Virtual DOM을 만들어서 사용)