[WEB개념] Virtual Dom

 

Vue.js 는 주로 Angular와 React의 장점들을 고루 갖고 있는 특징이 있습니다.

이번에 Vue.js 2.0 버전의 주요 특징 중 하나로 페이지 변경을 위한 "Virtual DOM" 이 추가되었습니다.

React와 Ember에서 사용하는 이 "가상 돔"은 웹 페이지의 변경 속도를 매우 빠르게 해줍니다.

 

 

 

브라우저 DOM Rendering 과정

 

 

 

 

1. HTML 다운로드 및 파싱: 브라우저는 웹 페이지의 HTML 문서를 다운로드하고, 파싱하여 DOM 트리를 생성합니다. 파싱 과정에서 문서의 각 요소와 태그를 인식하고, 요소의 계층 구조 및 속성을 결정합니다.
   
   
2. CSS 다운로드 및 처리: 브라우저는 HTML 파싱 과정과 병행하여 CSS(Cascading Style Sheets) 스타일 시트를 다운로드하고 처리합니다. 스타일 시트는 문서의 요소에 대한 스타일, 레이아웃 및 시각적 효과를 정의합니다. CSS 파싱은 스타일 규칙의 계산, 스타일 규칙 간의 우선순위 결정, 상속 등을 포함합니다.
   
   
3. Render 트리 생성: DOM 트리와 CSS 스타일 규칙을 결합하여 Render 트리를 생성합니다. Render 트리는 브라우저가 실제로 화면에 표시하는 데 필요한 요소들을 포함하며, 각 요소의 크기, 위치 및 스타일 정보를 가지고 있습니다.
   
   
4. 레이아웃 및 페인팅: Render 트리를 기반으로 브라우저는 각 요소의 정확한 위치와 크기를 계산하고, 이를 기반으로 화면에 요소를 배치합니다. 이후 페인팅 과정을 통해 각 요소가 화면에 그려집니다.
   
   
5. 리플로우와 리페인트: DOM이나 CSS 스타일이 변경되면, 브라우저는 변경된 부분만 다시 계산하여 리플로우(Reflow)와 리페인트(Repaint)를 수행합니다. 리플로우는 요소의 크기나 위치와 관련된 변경에 대한 계산을 수행하며, 리페인트는 변경된 요소의 스타일에 대한 새로운 페인팅을 수행합니다. 이는 성능상의 이유로 최소화해야 하는 작업입니다.

 

 

DOM의 문제점

= "It’s expensive to update the DOM"

 

우리는 스크립팅 언어인 자바스크립트를 사용하여 웹페이지를 동적으로 변경시킨다. 이 때, 브라우저는 목표 DOM 노드들을 찾은 후 원하는 변경 사항에 맞게 조작하기 위해 몇 가지 작업을 합니다.

document.getElementById('myId').appendChild(myNewNode); 

 

 일반적인 앱에서, DOM에는 수 천개의 노드들이 존재할 수 있고 업데이트를 위해 복잡한 처리 과정이 필요하게 됩니다.

이로 인해 브라우저의 속도는 느려지게 됩니다. 상단의 브라우저 동작 원리를 설명한 이유는 이 문제점 속에 있습니다.

 

먼저 브라우저에서 페이지를 로드하게 되면 렌더링 트리와 돔 트리를 생성하게 되고 여러 과정을 거쳐서 브라우저에 CSS가 적용된 페이지가 그려지게 됩니다. 여기서 자바스크립트로 DOM을 조작할 때 렌더링 트리는 각 변경 사항마다 하나씩 해석하여 렌더링을 시키게 되는 구조입니다.

 

 

 

가상 돔 (Virtual DOM)

• 먼저 가상 돔은 리액트에서 나온 개념이 아니지만 리액트는 무료로 이 개념을 사용하고 사용자들에게 제공합니다. Vue.js도 마찬가지입니.
  
  
• 가상 돔은 HTML 돔의 추상화 개념입니다. 이것은 가볍고, 브라우저 스펙의 구현체와는 분리되어있습니다. 사실, 돔은 이미 추상화 개념이기 때문에 가상 돔은 추상화를 또 추상화한 개념입니다.
  
  
• DOM의 복사본을 메모리 내에 저장하여 사용
  
  
• 변경 사항을 "가상의" 위치에서 처리하고, "실제 DOM"의 조작을 최소화합니다. 즉, DOM트리를 모방한 가벼운 자바스크립트 객체를 통해 직접 DOM을 핸들링 하지 않고 퍼포먼스를 향상시킵니다

function anonymous(
) {
with(this){return _c('main',{attrs:{"id":"main"}},[_c('p',{domProps:{"textContent":_s(name)}}),_v(" "),_c('p',{domProps:{"textContent":_s(birth)}}),_v(" "),_c('my-component')],1)}
}

 

 

=>  실제 DOM을 조작하는 것은 느리지만, virtual DOM을 조작하는 건 꽤 빠릅니다. 그 이유는 virtual DOM은 노드의 변경 사항만을 DOM에서만 변경하지, 화면을 그리지 않거든요. virtual DOM을 사용하면 데이터 변경이나 DOM 구조 변경에 대한 브라우저에서의 비효율적인 재렌더링 작업이 줄어듭니다.

 

 

 

 

 

 

---

https://kkodu.tistory.com/1