DOM과 Virtual DOM에 대해서

DOM이란 무엇인가? 

• MDN 문서에 따르면
  • 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다
  • 쉽게 말하면 일종의 웹페이지 문서라고 생각하면 편하다. 

그러면 DOM이 왜중요한가?

• 브라우저 동작 방식을 이해할려면 DOM에 대한 이해가 있어야된다 
• 아래는 Webkit 동작과정이나 브라우저엔진의 동작과정은 대부분 비슷하게 동작한다 

Webkit엔진의 동작과정

 

1. DOM Tree 생성
   • 브라우저가 HTML을 전달받으면, 브라우저 렌더 엔진이 이를 파싱 DOM 노드(Node)로 이루어진 트리생성
2. Render Tree 생성
   • 외부 CSS파일 및 엘리먼트의 inline스타일을 파싱, 스타일 정보를 사용하여 DOM트리에 따라 새로운 트리 생성
3. Render Tree 이후 
   • Attackment를 통해 DOM트리의 모든 노드들을 'attach'라는 메소드를 통해 스타일 정보 계산 객체형태롤 반환
4. Layout (Reflow)
   • 렌더트리가 모두 생성된이후 각 노드들은 스크린 좌표가 주어진다
5. Painting
   • 렌더링된 요소에 색을 입히는 과정 -> 스크린에 원하는 정보가 나온다.

• 정확한 과정이 궁금하다면 아래 링크참조
  • 브라우저는 어떻게 동작하는가?

Virtual DOM은 무엇인가?

• 쉽게 말해 가상의 DOM을 생성 (로컬) 브라우저가 Render를 하기전에 변경사항을 요청하는 방식이다
• 실제 DOM에는 렌더링되지 않기 떄문에 연산비용이 적다.
• 최종적인 변화를 일으킨 부분만 DOM에 변화시키므로 빠르다. (기존 DOM도 빠르지만)
  • 연산은 줄이면서 성능은 개선

그러면 Virtual DOM은 왜 사용하는가? 

• 사실 위의 과정만 본다면 너무 단순해서 그냥 DOM API만 써두 되지 않나? 라는 생각이 들수도 있다.
• 또한 순수한 javascript 혹은 jQuery로도 Virtual DOM을 충분히 구현가능하고 같은효과를 볼수 있다
• 근데 왜 굳이 Virtual DOM을 쓰는가? 

React와 JS의 DOM리렌더 차이

사실 간단한 웹이라면 상관 없으나 

최근 웹이 엄청나게 성장하였고 그와 더불어 DOM의 연산도 늘어나기 시작하였다 

한 예시로 facebook같은 데이터를 많이 다루고 하는 업체에서 DOM의 리렌더링이 얼마나 자주일어나겠는가? 

• 그 과정을 개선한 것이 바로 Virtual DOM이다. 
• Facebook의 예로 새로운 게시물이 계속 아래에서 로딩되므로 특정 DOM list만 개선시켜주면된다. 
• 하지만 기존 DOM tree사용시 지속적으로 DOM이 모든걸 개선하므로 연산,성능이 좋지 못하다
  • 이렇게되면 사용자 입장에서도 영향을 받을수 있다.

 

정리

• DOM은 웹페이지 문서같은 것이다. (브라우저에서 렌더링)
• DOM도 충분히 빠르나 Virtual DOM의 특정 DOM의 상태변화를 감지한뒤 최종 실제 DOM에 렌더링하는 것이 성능및 연산에 최적화가 좋다 

 

추가적으로 읽기 좋은 자료들

ko.reactjs.org/docs/faq-internals.html

Virtual DOM과 Internals – React

velopert.com/3236

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

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

DOM 소개 - Web API | MDN