Diffing Algorithm
Virtual DOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 알고리즘
DOM
문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 interface이다.
-
DOM은 HTML 문서 내의 모든 요소를 정의하고, 각 요소를 조작하는 방법을 제공한다.
-
DOM은 HTML 문서를 계층적 구조로 표현한다. (Tree 자료구조)
-
DOM에 저장된 콘텐츠는 프로그래밍 언어를 통해 접근하거나 조작할 수 있다.
-
각 브라우저는 자신만의 방법으로 DOM을 구현했다.
-
JavaScript가 DOM에 접근하기 위해 사용하는 메소드 예시
document.querySelector(selectors)document.getElementById(id)node.append(node)element.setAttribute(name, value)element.addEventListener(type, listener)
React DOM
React로 만든 컴포넌트를 html과 연결한다.
Virtual DOM
UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념 (재조정)
-
기술보단 패턴에 가깝다.
-
가상 DOM은 실제 DOM의 내용을 공유한다.
-
실제 DOM과 달리 직접적으로 브라우저 화면의 UI를 조작하지 않는다.
-
업데이트 전과 후의 가상 DOM을 비교하여 변경된 부분만 실제 DOM에 적용한다.
- 변경된 부분을 한 번에 적용하기 때문에 효율적이다.
Diffing Algorithm
Virtual DOM을 비교하여 변경된 부분만 실제 DOM에 반영하는 알고리즘
-
실행 시간
- 일반적인 트리 비교: O(n^3)
- 디핑 알고리즘: O(n)
-
트리의 계층 순서대로 같은 계층끼리 비교한다.
엘리먼트 타입이 다른 경우: 루트 타입이 달라진다면 이전 트리를 버리고 새로운 트리를 구축한다.엘리먼트 타입이 같은 경우: 변경된 속성들만 갱신한다.자식 요소 처리: key값 비교를 통해 변경 사항을 빠르게 감지한다.
