하루에 한 문제
DOM과 가상 DOM(Virtual DOM) 본문
우선 DOM과 가상 DOM에 대해 알아보기 전에 브라우저의 동작에대해 알아보자
- 사용자가 웹 브라우저의 주소 표시줄(사용자 인터페이스)에 URL을 입력하면 브라우저 엔진은 이를 해석한다.
- 브라우저 엔진은 이에 적절한 HTTP Request Message를 만들어 웹 서버에 전달하게 된다.
- 웹 서버는 요청된 방식에 따라 응답 메세지를 만들어 클라이언트에게 다시 보내준다.
- 브라우저의 렌더링 엔진은 웹 서버에 응답한 메세지의 콘텐츠를 화면에 표시한다.
DOM이란?
- Document Object Model로서 말 그대로 Document(웹페이지)를 객체로 표현하는 모델을 의미한다.
- 브라우저마다 DOM을 구현하는 방식은 다르기 때문에 구체적으로 정해진 언어나 모델은 아니다
- 다만 웹페이지를 객체로 표현한 모델을 의미할 뿐이다.
<html>
<body>
<p>Hello World</p>
<div><img src="example.png" /></div>
</body>
</html> 위의 HTML의 돔 트리 구조는 아래와 같이 만들 수 있다.
그렇다면 브라우저는 어떻게 DOM을 이용해 화면을 렌더링할까?
1. 브라우저는 html태그를 파싱해 돔 트리를 구성한다.
동시에 브라우저는 스타일시트에서 css를 파싱하여 스타일 규칙들을 만들어낸다.
2. 위에서 언급한 돔 트리와 스타일 규칙 두 가지가 합쳐져 렌더 트리를 만들어낸다.
여기서 주의할 점은 렌더 트리는 화면에 반영되는 것만 가지고 있기에 HTML의 모든 정보를 표현하는 돔 트리와 일대일 관계는 성립되지 않는다. 즉 렌더 트리에 없어도 돔 트리에는 있을 수 있는 것이다(display:none).
DOM의 문제점
돔을 업데이트 하는데 너무 많은 비용이 든다.
- 우리는 스크립팅 언어인 자바스크립트를 사용해 웹페이지를 변경시킨다.
- 일반적인 앱에서, DOM에는 수 천개의 노드들이 존재할 수 있고, 업데이트를 위해 복잡한 처리과정이 필요하다.
- 이로 인해 브라우저의 속도는 느려지게 된다.
- 먼저 브라우저에서 페이지를 로드하게 되면 돔 트리와 렌더링 트리를 생성하고 여러 과정을 거쳐 브라우저에 CSS가 적용된 페이지가 그려지게 된다.
- 즉 DOM을 조작할 때 렌더링 트리는 각 변경 사항마다 하나씩 해석하여 렌더링을 시키게 되는 구조이다.
자바스크립트를 사용해 페이지를 변경할 때 브라우저는 필요한 DOM노드를 찾고 변경하기 위해 작업을 수행한다.
document.getElementById ( 'myId'). appendChild (myNewNode);요즘 페이지에서는 DOM에 수천 개의 노드가 있을 수 있으므로 업데이트에 많은 비용이 든다....
작고 빈번한 업데이트로 인해 페이지의 속도가 느려질 수 있다!
DOM 노드는 아래와 같이 Javascript객체로 표시 될 수도 있다
// 자바 스크립트로 표현 된 DOM 노드의 의사 코드
Let domNode = {
tag
: 'ul'attributes : {id : 'myId'}
children : [
// where the LI 's would go
]
};이것이 바로 가상DOM이다!
가상노드를 업데이트 하는것은 많은 비용을 필요로 하지 않는다.
domNode.children.push ( '<ul> Item 3 </ ul>');
만약 한 번의 상태 변경으로 여러곳의 DOM 변경(노드의 수정)이 일어난다면 어떻게 될까?
- 수 천개의 노드들이 변경되어 렌더링 되기까기 적지 않은 시간이 걸릴 것이다.
- 현재까지 웹에서는 DOM변경에 맞춰 렌더링도 여러번 하게 되는 구조일 수 밖에 없었다.
그렇다면 가상 돔(Virtual DOM)은 무엇이고 왜 사용할까?
- 기존에는 화면의 변경사항을 돔을 직접 조작해 브라우저에 반영하였다.
- 하지만 이 방법의 가장 큰 단점은 돔 트리가 수정 될 때마다 렌더 트리가 계속해서 갱신된다는 점이다.
- 즉 화면에서 10개의 수정 사하이 발생하면 수정할 때마다 새로운 랜더 트리가 10번 수정되어 만들어지는것이다.
가상 돔을 활용하면 이러한 불필요한 렌더링 횟수를 줄일 수 있다.
- 이 가상돔을 활용한 대표적인 Front-end 프레임워크가 리액트, 뷰, 앵귤러이다.
- 이러한 프레임워크들은 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고 변경사항이 모두 반영된 가상 돔을 만들어 낸다.
- 그 후 가상 돔을 이요해 한 번만 돔수정을 하게 되고 이는 한 번만 렌더 트리를 만들어내게 된다.
- 결국 브라우저는 불필요한 렌더링 횟수를 줄일 수 있게 되는 것이다.
가상 돔(Virtual Dom)은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌, Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념이다
참고
https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40
Comments