DOM

DOM (The Document Object Model, 문서객체모델)

: HTML이나 XML문서를 나타내는 API, HTML의 각 요소들이 브라우저에서 실체로 제작되는 것, HTML에 작성한 코드가 전체구조에 맞춰서 브라우저 안에 배치되고, 추가적인 명령(이벤트)을 통해 속성, 디자인, 배치 등을 조작할 수 있도록 된 상태(기능을 수행할 객체들로 실체화된 형태)

- 특정언어에 종속되지 않는다. (자바스크립트 객체 ❌, 자바스크립트를 통해서 제어 가능)
   -> DOM은 API를 가지고 있기 때문

- DOM 안에는 각종 node들이 트리구조로 들어있다.

- 브라우저는 DOM 트리, CSSOM(CSS Object Model) 트리 를 융합해서 화면을 만든다.

- BOM(Browser Object Model) 브라우저 자체를 다루는 API (alert, setTimeout 등등)

 

가상돔(Virtual DOM)

: DOM의 구조만 간결히 흉내낸 자바스크립트 객체, 실제 DOM을 조작해서 할려면 컴퓨터 부담 ↑, 속도 ↓
  기존모습과 변화된모습을 합리적인 알고리즘으로 비교해서 차이가 생기는 부분만 파악(diffing) > 이부분만 실제 DOM에 반영

- 가상돔을 쓰는 것도 결국, 동작을 더 추가하는 것 > 속도가 빨라지지는 않는다.

- 가상돔 방식은 런타임(사이트가 실행되는 시점)에 DOM 변경을 가장 빠르게 ❌ 사용자가 불편하지 않을 만큼 충분히 빠르게 ⭕️ 설계한 결과물, 최적화 작업

  React, Vue = 전용 코드를 브라우저가 가상돔에서 해석 > 메모리에서 먼저 구현 > 실제 DOM에 적용
  Svelte = 최적화작업은 빌드시에 미리 컴파일하기 때문에 브라우저가 작동 ❌ > 용량 ↓, DOM 조작이 더 빠름