DOM과 Virtual DOM

DOM: HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 형식

DOM은 자바스크립트를 사용해 웹 화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 프로그래밍 인터페이스를 제공함

 

브라우저의 렌더링 과정

1. 렌더 엔진이 HTML을 파싱해 DOM 노드로 이루어진 트리를 생성
2. CSS파일과 inline 스타일을 파싱하여 DOM + CSS DOM을 구성 -> *render tree
3. Layout: render tree의 각 노드들의 스크린 상의 위치 결정(position, size)
4. Repaint: 실제 화면에 그리기

*render tree: 문서의 시각적인 구조를 나타냄

어떤 인터렉션에 의해 DOM에 변화가 발생하면 해당 렌더링 과정(1~4)이 반복됨 -> 비효율적

 

Virtual DOM

- 실제 DOM object와 같은 속성을 가짐

- 실제 DOM이 갖는 API는 갖지 않음

 

데이터가 변경되며 전체 UI는 Virtual DOM에 렌더링되고 이전 Virtual DOM과 비교하여 변경 부분만 DOM에 업데이트 됨

 

 

 

참고 사이트

https://www.youtube.com/watch?v=zyz1eJJjsNE 

https://www.youtube.com/watch?v=PN_WmsgbQCo