DOM 이란,
- Document Object Model의 준말.
- 웹문서를 트리구조로 표현.
- 각 요소를 객체로 간주함
- DOM요소를 실시간으로 변경가능.
- 클릭, 입력, 스크롤 같은 이벤트 처리가 가능함.
한계
- 비싼 조작비용 - node를 변경할때마다 레이아웃계산, 다시그리기가 발생하여 성능이 저하됨.
- 동기적 구조 - DOM 업데이트는 실시간이고, 여러번 수정하면 브라우저가 그때마다 처리를 진행함
- 상태가 많아지면, 어떤 DOM을 언제 업데이트 해야할 지 로직이 복잡해짐
그래서 나온 것 :
VDOM
virtual DOM으로,
특징
DOM을 직접 조작하는게 아니라, 메모리 상에서 가상의 VDOM을 만들어서 관리를 진행함.
메모리 상에서 먼저 변경된 UI 구조를 계산하고,실제 DOM 과 비교하여 변경된 부분만 업데이트를 진행하여 성능을 향상시킴.
대표적인 예 : React, Vue 와 같은 라이브러리/프레임워크가 VDOM을 이용함.
VDOM의 동작방식
- 변경이 됐을 떄, 기존의 가상 DOM과 새로운 가상 DOM을 비교함 (Diffing)
- 변경된 부분만 실제 DOM에 적용함 (Patching) -> 불필요한 화면 갱신을 줄여 성능을 최적화 할 수 있음.
DOM vs VDOM
DOM에 적용하지않고, VDOM을 통해 필터링을 진행함.
과거에는,
js가 DOM을 직접 조작하여, 너무 많은/자주 DOM을 직접 바꾸었는데
현재에는,
js는 VDOM을 통해 UI상태를 설명함. 이에 VDOM은 변경한 사항만 실제 DOM에 반영하여 효율적임.
(Github의 커밋을 생각하면 됨.)
ad astra per aspera