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을 핸들링 하지 않고 퍼포먼스를 향상시킵니다

 

 

---

 

1. 불필요한 실제 DOM 조작을 최소화

• 실제 DOM 조작의 비용: 브라우저의 실제 DOM을 수정하는 작업은 비교적 느립니다. 이는 브라우저가 DOM을 변경할 때마다 레이아웃 계산, 스타일 적용, 리페인트(repaint) 등의 작업이 필요하기 때문입니다. 예를 들어, DOM 요소가 추가되거나 삭제되면 브라우저는 화면을 다시 그리기 위해 많은 연산을 수행해야 합니다.
  
  
• 가상 DOM의 최적화: React는 실제 DOM을 바로 변경하는 대신, 가상 DOM(메모리 상에 존재하는 JavaScript 객체)을 사용하여 데이터가 변경되었을 때, 가상 DOM에서 먼저 변경사항을 계산합니다. 그 후, 가상 DOM과 실제 DOM의 차이를 계산하여, 실제 DOM에 적용할 최소한의 변경만을 수행합니다. 이 과정에서 레이아웃 계산, 스타일 적용, 리페인트 등 브라우저의 비효율적인 렌더링 작업을 줄일 수 있습니다.

2. 효율적인 차이 계산(diffing)

• Diffing 알고리즘: React는 가상 DOM을 사용하여 변경된 부분을 효율적으로 찾아내는 diffing 알고리즘을 사용합니다. 이 알고리즘은 두 가상 DOM 트리를 비교하여, 실제 DOM에서 변경이 필요한 부분만을 찾습니다. 이렇게 하면 불필요한 렌더링 작업을 줄이고 성능을 최적화할 수 있습니다.
  
  
• 최소화된 업데이트: React는 "최소 업데이트 전략"을 따르기 때문에, DOM을 전체적으로 다시 렌더링하는 대신 변경된 부분만을 실제 DOM에 반영합니다. 이렇게 함으로써, 화면을 그리는 비용이 줄어듭니다.

---

https://kkodu.tistory.com/1