DOM & Virtual DOM

i_sy_code·2022년 6월 20일

📋 DOM

DOM은 Document Object Model, 문서 객체 모델이라고 부르며
HTML 문서에 접근하기 위한 일종의 인터페이스라고 할 수 있다.
문서 객체란 HTML 문서의 태그를 JS가 이용할 수 있는 객체(object)로 만든 것을 말한다.
즉, DOM이란 브라우저가 HTML 태그를 다음과 같이 계층화시켜 트리구조로 만든 객체 모델이다.

트리 구조에서 모든 각 개체를 노드(node)라고 표현한다.
head, bode, script, h1 등의 태그뿐 아니라 태그 내 Text나 Attribute 등도 모두 node라고 볼 수 있다.
따라서 자바스크립트는 이 DOM의 document 객체(root 노드)를 통해 페이지(HTML/CSS)에 접근하고, 수정할 수 있게 된다.

📋 브라우저 렌더링 순서 (웹페이지 생성 과정)

브라우저가 HTML 문서를 읽은 후, 스타일을 입히고 Viewport에 표시되기까지 거치는 일련의 과정을 CPR(Critical Rendering Path)라고 한다.

1. DOM 트리 구축

브라우저가 HTML 문서를 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM 노드로 이뤄진 트리를 만든다. 각 노드는 HTML 엘리먼트들과 연관되어 있다.

2. CSSOM 트리 구축

HTML을 파싱하다가 CSS 링크를 만나면 CSS 파일을 요청해서 받아온다. 받아온 CSS 파일은 HTML을 파싱한 것과 유사한 과정을 거쳐서 역시 트리 형태의 CSSOM으로 만들어진다.

3. 자바스크립트 실행

JS 코드를 만나면 해당 파일을 받아와 실행할 때까지 파싱이 멈춘다.

4. 렌더 트리 생성

DOM과 CSSOM은 서로 각기 다른 측면을 표현하는 독립적인 개체다. 이 두가지를 병합하여 브라우저가 어떻게 화면에 픽셀을 렌더링하는지에 대한 정보를 가진 Render 트리를 만든다.
Render 트리는 DOM 트리에 있는 것들 중에서 실제로 화면에 보이는 노드들로만 이루어진다.
<head>태그나 display:none 속성같은 경우 렌더 트리에 추가되지 않는다는 의미다.

5. 레이아웃(Reflow) 생성

뷰포트 내에서 각 요소의 위치 및 크기를 정확하게 계산하여 박스 모델로 출력한다.

6. 페인팅(Painting)

렌더링 된 요소에 색을 입히는 과정이다. 텍스트, 색, 이미지, 그림자 등 요소의 모든 시각적 부분을 그리는 작업을 포함한다.

📋 Virtual DOM

복잡한 SPA의 경우 돔 조작이 많이 발생하여 브라우저의 연산이 늘어나고, 전체 프로세스를 비효율적으로 만든다.
이러한 비효율성을 해결하고자 나온 Virtual DOM은 DOM을 추상화한 가상 객체를 메모리에 만들어 놓은 것이다.
즉, 변화가 일어나면 렌더링되지 않는 돔의 가벼운 사본(Virtual DOM)에 적용시키고,
모든 변화를 하나로 묶어 최종 결과물만 실제 DOM에 던져주게 된다.
이에 따라 브라우저 내에서 발생하는 연산 양을 줄여 성능을 개선시키는 것이다.

예시를 들기 위해 사용한 코드로, 위의 virtualDom이란 변수가 실제 VirtualDOM을 뜻하진 않는다.

위의 코드에서 replaceChild를 쓰기 전까지는 자바스크립트 메모리 영역에서만 일어나는 일이므로 화면에 영향을 끼치지 않는다.
replaceChild를 사용할 경우에만 단 한번 화면을 그리는 계산을 하게 되는 것이다.
리액트의 Virtual DOM은 결국 이러한 과정을 자동화해주는 프로세스라고 보면 된다.

🔗 참고 자료
TIL) DOM이란?
Critical Rendering Path
리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가?
왜 Virtual DOM은 브라우저 렌더링 횟수를 줄여주는가?