DOM은 Document Object Model읠 줄임말로, 트리구조로 되어있는 객체 모델이다.
트리구조로 되어있어 이해하기 쉽다는 장점이 있지만,
이런 구조 때문에 거대한 DOM트리에서 잦은 DOM 업데이트는 성능을 저하시키고,
찾고자하는 DOM을 제대로 찾지 못하면 다시 거대한 html을 뜯어봐야 한다는 단점이 있다.
Virtual DOM은 실제 DOM을 추상화한 개념으로, 변화가 많은 실제 DOM에서 직접처리하는 방식이 아닌, Virtual DOM과 메모리에서 미리 처리하고 저장한 후,
실제 DOM과 동기화 하는 프로그래밍 개념인 것이다.
예들 들어서
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="root">
<ul class="list">
<li>red apple</li>
<li>yellow banana</li>
<li>yellow mango</li>
</ul>
</div>
</body>
</html>
위와 같은 코드를
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div id="root">
<ul class="list">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
으로 변경해야 한다고 생각해보자.
비효율적인 방법은 다음과 같다.
const root = document.querySelector('#app')
const liTags = root.querySelectorAll('li')
liTags[0].textContent = 'one'
liTags[1].textContent = 'two'
liTags[2].textContent = 'three'하나의 업데이트 마다 view의 변화가 생기기 때문에, 브라우저는 다시 화면을 그리는 계산을 하고,
성능을 저하시키는 병목점이 될 수 있다.
이제 이것을 단 1번의 DOM조작으로 업데이트 해보자.
const root = document.querySelector('#app')
const virtualDOM = document.createElement('ul')
virtualDOM.classList.add('list')
const one = document.createElement('li')
one.textContent = 'one';
const two = document.createElement('li')
two.textContent = 'two';
const three = document.createElement('li')
three.textContent = 'three';
virtualDOM.appendChild(one)
virtualDOM.appendChild(two)
virtualDOM.appendChild(three)
root.replaceChild(virtualDOM, root.querySelector('ul'))위에서 선언헌 virtualDOM은 실제로 쓰이는 것과 형태가 다르나, 개념이해를 목적으로 작성되었습니다.
위 코드에서는 replaceChild 하기 전에는 자바스크립트 메모리 영역에서만 일어나는 일이므로 화면에 영향을 끼치지 않고 replaceChild할 경우에만 단 1번 계산을 하게 되어, 이전 방식보다 더욱 효율적이라고 할 수 있습니다.
'개발 > FrontEnd Interview' 카테고리의 다른 글
| innerHTML vs appendChild (0) | 2021.02.18 |
|---|---|
| document 객체에 접근하면 성능이 저하될까? (0) | 2021.02.18 |
| reflow vs repaint(redraw) (0) | 2021.02.18 |
| Javascript Prototype에 관하여 (0) | 2021.02.15 |
| button type에 관하여 (0) | 2021.02.15 |
