SPA - VirtualDOM

DOM (Document Object Model)

• DOM은 HTML 문서를 파싱해 구성 요소들을 객체로 구조화 시킨 것
  • DOM은 트리 형태를 가진다.

문제

• 브라우저 렌더링 과정
  • HTML 문서를 파싱하여 DOM 객체 (트리) 생성, CSS 파싱하여 스타일러스 규칙 생성
  • 어테치먼트 과정을 거쳐 실제 보여져야 할 요소인 렌더 트리 생성
  • 렌더 트리를 통해 렌더링 과정을 거쳐 화면에 표시
• 브라우저 DOM 변경 작업 (DOM 수정 작업)
  • DOM 트리에서 변경될 node와 하위 node제거
  • 하위 node를 포함한 변경된 node를 다시 추가
  • css에 맞춰 렌더링
  • 트리에서 node를 제거하고 다시 추가하는 작업은 효율적인 알고리즘을 사용한다면 복잡한 작업은 아니지만, 렌더링 하는 작업을 변경 시 반복적으로 하게 된다면 시간이 많이 소모
• 실제 DOM을 조작할 때는 노드 정보가 변경되면 매번 위 과정을 다시 거쳐야 하는 문제가 있다
• DOM의 트리에서 조작해야 할 노드를 탐색하고, 변경 후 렌더링을 다시 거치는 과정이 만약 n번이라면 최대 n번 모두 반복해야 하는 비효율이 발생
  • 실제 DOM에서 어느정도 합쳐 batch로 진행할 수 있지만 여전히 많은 수의 과정을 거치는 문제가 있다.

Virtual DOM

• 가상돔(Virtual DOM)은 실제 DOM과 같은 요소와 속성을 가지고 있는 JavaScript 객체로 메모리에 저장된다.
• 가상돔은 실제 브라우저에 렌더링 되는 목적이 아니기 때문에 DOM API(이벤트 핸들러, 선택자, 조작 메서드 등)와 스타일러스 규칙도 존재하지 않기 때문에 실제 DOM에 비해 가벼운 특성이 있다.
• 가상돔을 사용해서 최소한의 Reflow, Repaint를 처리하려는 목표 달성
  • Reflow: 레이아웃이 변경될 때 요소의 위치, 크기를 재계산
  • Repaint: 스타일이 변경되어 다시 스타일러스 규칙을 적용하는 과정
• 단,가상돔을 생성해서 메모리에 저장하기 때문에 엄청나게 많은 가상돔이 생길 시 메모리 사용량이 많이 늘어날 수 밖에 없으며, 오버헤드가 발생할 수 있다.

React

• 상태가 변경될 때 마다 화면이 새로 렌더링 된다.
• react에서는 가상돔이 두 개가 생성된다.
  • 업데이트 이전 내용을 담고 있는 가상돔
  • 업데이트 이후 내용을 담고 있는 가상돔
• 업데이트 이후 내용을 담고 있는 가상돔과 업데이트 이전 내용을 담고 있는 가상돔을 비교해서 어떤 요소가 바뀌었는지 파악하고 바뀐 부분만 실제 DOM에 적용 시킨다.
  • 비교하는 과정: Diffing, 적용하는 과정: Reconciliation
• Reconciliation(재조정) 과정은 batch로 바뀐 모든 부분을 업데이트 하기 때문에 렌더링을 효율적으로 할 수 있다.

vue

• vue에서는 가상돔이 하나 생성된다.
• 가상돔과 실제돔을 비교해서 변경될 부분을 감지하고 실제돔에 batch로 바뀐 모든 부분을 업데이트, 렌더링 수행

요약

• 실제 DOM을 통해 렌더링을 매번 하면 시간이 오래 걸리는 과정을 여러 번 해야 하는 문제가 발생
• 가상 DOM을 사용해서 해결
  • 실제 DOM에 변경된 부분만 감지하여 batch 작업을 통해 한 번에 변경 후 렌더링
  • 실제 DOM을 제어하는 것 보다 빠르지만, 더 많은 메모리를 사용하며 오버헤드 발생 위험