DOM 이란?
Virtual DOM 을 알기위해선 먼저 DOM이 뭐하는 친구인지 알아보자.
DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다
즉, 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다.
DOM은 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(object)로 변환하는 것이다
브라우저 동작 원리
그렇다면 DOM이 어떻게 브라우저에서 동작되는지 알아보자.
1.요청과 응답
여러분이 어떤 링크를 누르거나 URL에 주소를 입력하고 엔터를 누르면 그 페이지에서 HTTP 요청이 이루어지고 해당 서버에서 HTML document를 응답으로 준다.
2.HTML 파싱과 DOM 생성
브라우저는 HTML 소스코드를 파싱하고 돔 트리를 생성한다. 이 돔 트리는 데이터를 표현한 것인데, 여기에는 HTML 태그들에 해당하는 노드와 태그 사이의 텍스트 청크들에 해당하는 텍스트 노드가 들어가 있다. 돔 트리의 루트 노드는 html태그 이다.
3.CSS 파싱과 CSSOM 생성
브라우저 렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성한다. DOM을 생성해 나가다가 CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단하고 link 태그의 href 어트리뷰트에 지정된 CSS 파일을 서버에 요청하여 로드한 CSS 파일이나 style 태그 내의 CSS를 해석하여 CSSOM(CSS Object Model)을 생성한다. 이후 CSS 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 파싱하기 시작해서 DOM을 생성한다.
4.렌더 트리 생성
렌더링 엔진은 2 ~ 3번 과정을 거쳐 렌더링을 위해 렌더 트리로 결합됩니다. 렌더 트리는 돔 트리의 일종이지만 완전히 동일하진 않다. 렌더 트리는 스타일 정보를 알고 있어서 만약 당신이 div을 display: none;으로 숨겼다면 이는 렌더 트리에 표현되지 않는다. 즉, 화면에 렌더링되지 않는 노드들은 포함되지 않는다. 완성된 렌더 트리는 각 HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.
DOM의 문제
현대의 웹과 앱은 예전과 다르게 규모가 많이 커졌다 따라서 복잡한 SPA(Single Page Application) 으로 구성 되어 있어 변경해야 할 요소들이 엄청나게 많다.
요소 개수가 몇 백 개, 몇 천 개 단위로 많은 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다 보면 성능 이슈가 조금씩 발생하기 시작한다. 즉, 느려진다는 말인데 이것이 정확한 표현은 아니다. DOM자체는 빠르다. 읽고 쓸 때의 성능은 자바스크립트 객체를 처리 할 때의 성능과 비교하여 다르지 않다.
단, 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것이다. 그리고 이 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있고, DOM이 추가, 삭제 혹은 태그 위치가 변할때마다 일어난다.
그래서 이러한 부분을 개선하고자 Virtual DOM 이 나왔다.
Virtual DOM 이란?
Real DOM 을 추상화한 JavaScript 객체, 즉 DOM의 사본 이라고 할 수 있다.
그렇다면 어떻게 작동할까?
Virtual DOM의 작동
위 사진처럼 어떤 노드를 변경하거나 변화가 생기면, Virtual DOM에 변경 내역을 한 번에 모으고 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후 (React 의 diffing 알고리즘), 구성요소의 변경이 부분만 찾아 변경하고 한번만 렌더링 한다.
Virtual DOM의 장점
1.DOM fragment를 관리하는 과정을 수동으로 하나하나 작업 할 필요 없이, 자동화하고 추상화한다
2.DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없어진다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다.
