1. DOM이란?
DOM은 MDN 에서 다음과 같이 정의하고있다.
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
사실 이 것 만으론 쉽게 이해가 되지 않아 자세히 살펴보기로했다.
문서 객체란 <html>이나 <body> 같은 html 태그들을 JavaScript 가 이용할 수 있는 객체(object) 로 만든 것이다.
여기에 Model이 추가되어있는데 이 맥락에서 Model은 인식하는 방식 이라고 해석이 가능하다.
결국, DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식 혹은 document 객체와 관련된 객체의 집합으로 볼 수 있다.
그리고 DOM은 원본 HTML 문서의 객체 기반 표현 방식이라고도 볼 수 있다.
2. DOM의 개체 구조
브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델이다.
객체의 트리로 구조화되어 있기 때문에 DOM tree라고 부른다.
3. Virtual DOM
DOM에 변화가 생기면 렌더 트리를 재 생성하고(모든 요소들의 스타일이 다시 계산됨) 레이아웃만들고 페인팅하는 과정이 다시 반복된다.
Single Page Application에서는 DOM 조작이 많이 발생한다.
변화를 적용하기 위해 브라우저가 연산을 많이하고, 이 것이 전체적인 프로세스를 비효율적으로 만든다.
이 때 Virtual Dom이 빛을 발한다.
1. view에 변화가 있다면
2. 그 변화는 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시키고
3. 그 최종 결과를 실제 DOM에게 전달해 준다.브라우저 내에서 발생하는 연산의 양을 줄이며 성능이 개선되는 것 이다.
"동시에 일어난 변경들을 한번에 처리해준다"고 이해하면 쉽다.
정리용😊