Virtual DOM

• DOM을 추상화한 가상의 객체를 이용, 실제 DOM을 조작하기 전에 메모리 내에서 변경 사항을 계산하고 최소한의 업데이트만 실제 DOM에 적용하기 위한 기술

• DOM의 구조를 흉내낸 JavaScript 객체

  DOM

Virtual DOM의 등장 배경

• 직접적인 DOM 조작을 통한 렌더링의 비효율
• SPA에서의 DOM 복잡도 증가와 그에 따른 최적화 및 유지 보수 문제
• DOM을 반복적으로 직접 조작하면 브라우저가 렌더링을 자주 하게 되고, 그만큼 PC의 리소스를 많이 소모하게 되어 문제의 해결이 필요해짐

Browser(DOM 직접 조작)의 렌더링 처리 과정

• 기본적으로 DOM에 변화가 생기면 아래의 과정을 거쳐 렌더링 처리

  

  • HTML을 파싱하여 DOM을 생성 및 CSS를 파싱하여 스타일 규칙 생성
  • 생성한 DOM과 스타일 규칙으로 렌더 트리 생성(실제로 브라우저에 보여줄 요소를 표현)
  • 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업 수행

• 현대 웹처럼 변경할 대상과 빈도가 많은 경우 위와 같은 브라우저의 렌더링 처리를 여러번 해야하므로 비효율적

  • 현재 브라우저의 경우, Batched DOM Update(어느 정도 변화를 합쳐서 한번에 처리)를 통해 리렌더링 하므로 많이 비효율적이지 않음.

Vitual DOM 렌더링 처리

• 기본적으로 아래의 과정을 거쳐 렌더링 처리

  • 변화를 감지하면 변경 내역을 한 번에 모아 Virtual DOM을 수정
  • DOM과 변경된 Virtual DOM의 차이를 판단
  • DOM의 구성요소 중 변경 된 부분만 찾아 변경하고 한 번만 리렌더링
  • ⚠️주의) Virtual DOM과 리렌더링 처리의 알고리즘은 Framework에 따라 상이

  

• 즉, DOM에 변경 사항을 직접 수정하는 것이 아니라, 중간 단계로 Virtual DOM을 수정, 그 결과물로 DOM을 한 번 더 렌더링 처리

Vitual DOM의 한계

• 메모리에 저장하여 사용하기 때문에 사용자 기기의 스펙이 낮으면 느려질 가능성이 있음
  • 동시에 일어난 변경에 한해서 같이 렌더링을 처리, 순차적으로 일어난 변경을 모아 같이 렌더링 처리하는 것이 아니다.
  • 예) 버튼을 누를 때 마다 1씩 늘어나는 경우 버튼을 빠르게 누르면 누른 횟수보다 높은 숫자가 화면에 출력 됨

NAVER D2