[자바스크립트]Virtual Dom이란?

 

1. 우리가 DOM을 조작했을 때

 

가상돔을 이해하기 위해서는 브라우저가 어떻게 작동하는지 알아야 합니다.

우리가 DOM을 조작했을 때 아래와 같은 작업들이 이루어집니다.

 

 

• DOM Tree 생성

브라우저가 HTML을 전달받으면 브라우저가 이를 파싱하고 DOM노드로 이루어진 트리를 만듭니다.

노드

노드는 트리 구조로 정렬되기도 합니다.
노드는 하나의 자료 구조에 포함된 정보를 표현합니다.
출처
https://ko.wikipedia.org/wiki/%EB%85%B8%EB%93%9C_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)

 

• Render Tree 생성

그 뒤에 inline 스타일과 외부 css 파일을 파싱합니다.

스타일 정보를 사용하여 DOM트리에 따라 렌더트리를 생성합니다.

 

• Layout

렌터트리를 생성한 뒤, 각 노드들은 정확이 어디에 나타나야할 지 위치가 주어집니다.

 

• Painting

Layout이 완료되면 트리의 각 노드들을 거쳐가면서 paint() 메서드를 호출합니다.

그렇게되면 우리가 적어놓은 HTML파일대로 웹이 나타나게 됩니다.

 

---

2. Virtual DOM

가상 돔을 사용하지 않는다면 화면에서 변경되는것들을 DOM이 직접 조작하여 브라우저에 반영시켜주었습니다.

DOM은 DOM트리가 수정될 때마다 렌더트리가 계속해서 리렌더링하게 됩니다.

즉 화면에서 10개의 수정사항이 발생하면 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 됩니다.

 

가상 돔을 활용한다면 이렇게 불 필요한 렌더링 횟수를 줄일 수 있습니다.

가상 돔은 모든 연산을 끝내고 실제 DOM에 전당합니다.

그렇게 된다면 실제 DOM은 딱 1번의 작업만 작업을 하게됩니다.

즉 한번만 렌더트리를 만들어내는것이죠.

 

---