DOM & Virtual DOM

오늘은 DOM과 Virtual DOM에 대해 알아봅시다!

DOM이란

• DOM(Document Object Model)은 웹 페이지를 이루는 HTML 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미합니다.

DOM의 문제점

• DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질수록 속도가 느려집니다.
• 화면에 10개의 수정사항이 발생하면 수정할 때마다 렌더 트리가 10번 수정되면서 새롭게 만들어집니다.

DOM의 변경 시 일어나는 일

• 브라우저는 HTML을 구문 분석(파싱)하여 변화가 일어난 노드를 찾습니다.
• DOM 요소를 업데이트합니다.
• 부모 및 자식 노드에 대한 CSS를 다시 계산합니다.
• Reflow 과정을 진행합니다(성능 저하의 원인)
  • Reflow : 렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정(상대값 -> 절대값, 즉 px 단위로 변경)
• 마지막으로 디스플레이에 페인팅됩니다(Repaint)

Virtual DOM

• DOM이 생성되기 이전에, 이전 상태 값과 수정 사항을 비교하여 달라진 부분만 DOM에게 전달하여 딱 한번만 렌더링을 진행합니다.
  • 10개의 수정 사항이 생기더라도 1번만 렌더링됩니다.
• Virtual DOM은 실제 DOM에서 처리하는 방식이 아닌 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념입니다.
• React js, Vue js에서 이 기술이 사용됩니다.
• 실제 스크린에 렌더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠릅니다.

Virtual DOM의 리렌더링(업데이트) 과정

1. 데이터가 업데이트 되었을 때, 전체 UI가 Virtual DOM에서 리렌더링 됩니다.
   

2. 이전 DOM과 새로운 Virtual DOM의 차이를 계산합니다.(얕은 비교)
   

3. 계산이 끝난 후, DOM은 변경된 부분만을 변화시킵니다.