[keyword]
DOM, RealDOM, VirtualDOM
✔️ DOM (Document Object Model)
• XML이나 HTML 문서에 접근하기 위한 프로그래밍 인터페이스.
- DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
• 객체로 문서 구조를 표현하는 방법. 프로그래밍 언어가 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있음. 트리 형태로 노드들의 관계를 이용해 특정 노드의 조회, 수정, 제거 등이 가능함.
- The DOM is an abstraction of a page’s HTML structure.
It takes HTML elements and wraps them in an object with a tree-structure — maintaining the parent/child relationships of those nested HTML elements. This provides an API that allows us to traverse nodes (HTML elements) and manipulate them in a number of ways — such as adding nodes, removing nodes, editing a node’s content, etc.
• DOM은 변화가 일어날 때, 1. CSS 재연산 2. 레이아웃 구성 3. 페이지 리페인트
의 과정을 거침. 따라서 잦은 업데이트가 일어날 경우 필연적으로 성능저하 발생.
• DOM은 무겁기 때문에(문서 전체를 객체화해서 로드) DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 비용이 듬.
- DOM was originally intended for static UIs — pages rendered by the server that don’t require dynamic updates. When the DOM updates, it has to update the node as well as re-paint the page with its corresponding CSS and layout.
이와 같은 속도 이슈를 해결하기 위해서는 DOM을 최소한으로 조작해야 함
➡️ Virtual DOM이 등장할 타이밍 ㅎㅅㅎ..
참고자료:
[1]https://ko.reactjs.org/docs/reconciliation.html
[2]https://ko.reactjs.org/docs/faq-internals.html
[3]https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
