DOM

DOM(Document Object Model) 은 웹페이지를 이루는 태그(div, p, span)들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 모델이다.

DOM은 HTML과 Javascript를 이어주는 역할을 한다.

DOM의 문제점

DOM은 트리구조로 되어있어 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 오류가 발생할 수 있다.

또한 모던 웹은 SPA(Single Page Application)을 사용한다. SPA에서는 HTML 문서가 하나이며, 동적인 요소가 들어간 HTML을 계속 리렌더링 해야하는 문제점이 발생하게 되었다.

Javascript 코드가 실행될 때 다음과 같은 과정으로 실행된다.

• 브라우저는 HTML을 구문 분석하여 이 ID를 가진 노드를 찾음
• 특정 요소의 자식 요소를 제거
• 'updated value'으로 요소(DOM)을 업데이트
• 부모 및 자식 노드에 대한 CSS를 다시 계산
• 브라우저 디스플레이에 페인팅

위의 과정은 DOM 트리가 수정될 때 마다 렌더 트리가 실시간으로 갱신된다. 100개의 수정사항이 생기면 새로운 렌더트리가 100번 갱신된다.

Virtual DOM (가상 돔)

Virtual DOM 이란 DOM을 가볍게 만든 Javascript 객체이다.
Virtual DOM은 DOM의 상태를 메모리에 올려놓고 DOM에 변경이 있을경우 해당 변경을 반영한다.
즉 수정사항이 여러가지 있더라도 Virtual DOM은 한번만 렌더링이 이루어진다.

Virtual DOM 동작방식

1. 전체 UI가 가상 DOM에 리렌더링 된다.
2. 기존의 가상 DOM과 새로운 가상 DOM을 비교하여 차이를 계산한다.
3. 계산이 끝난 후 변경된 부분만 실제 DOM에 전달한다.