원글
https://medium.com/tony-freed-consulting/what-is-virtual-dom-c0ec6d6a925c#.wdffntbv4

What is DOM?

가상 DOM 에 대해 말하기 전에 실제 DOM에 대해서 먼저 말해보자.

DOM은 Document Object Model의 약자로, 구조화된 문서를 표현하는 방법을 말한다. 크로스 플랫폼이고 랭귀지 독립적인 컨벤션을 가졌으며 HTML, XML 등에서 데이터를 표현하거나 상호작용하는데 사용된다. 웹브라우저는 DOM 을 사용하기 때문에 우리는 자바스크립트와 CSS를 사용해서 상호작용할 수 있다. 노드를 검색하고 해당 노드의 디테일을 변경하거나, 삭제하고 새롭게 생성할 수 있다.
이제 DOM API는 대부분의 크로스 플랫폼이며 크로스 부라우저 를 지원한다.
그럼 뭐가 문제일까?

DOM Problem

제일 큰 문제점은 DOM은 다이나믹 UI를 생성하는데 최적화 되어 있지 않다는 점이다.

우리는 자바스크립트와 JQuery 같은 라이브러리를 사용해서 개발을 하지만, JQuery 같은 라이브러리들은 퍼포먼스 문제를 해결하기엔 부족하다. 트위터나 페이스북, 핀터레스트 같은 모던 소셜 네트워크를 보면 조금만 스크롤해도 유저는 수천개의 노드를 받게 된다. 이런상황에서 효울적인 DOM사용은 중요한 문제가 된다. 예를 들어 1000 개의 div를 5 픽셂만 옮긴다면 1초이상 걸릴 것이다. 모던웹에선 너무 긴 시간이다. 스크립트와 몇몇 트릭으로 최적화 할 수 있을진 몰라도 결국엔 다이나믹 UI와 많은 페이지를 작업하기엔 너무 힘든 일이다.

이 문제를 해결할 수 있을까? 그럴 수 있을것 같다.
현제 W3C 그룹은 Shadow DOM을 작업중이다.
Shadow DOM - W3C working draft standard 이다. 명세에 따르면 여러 DOM트리를 하나의 계층에 통합하고 이 트리가 다른것에 어떻게 영향을 미치는지 알게되어 좀더 나은 DOM 구성이 가능하다고 한다.
다른 옵션으로 Virtual DOM이 있다. 표준은 아니지만 표준 DOM에서 해결책으로 사용되고 있다.

Virtual DOM

DOM을 직접 건드리기 보다 우리는 이것의 추상화된 버전을 만든다. 다시 말해서 가벼운 버전의 DOM 복사본을 만드는 격이다.
가상 DOM에 수정을 하고 실제 DOM에 적용할 수도 있다. 실제 DOM에 적용하기 전에 바뀐 부분이 있는지 비교한 후에 적용한다.

렌더링 비용이 큰 부분들이 전부 필요하지 않기 때문에 직접 DOM을 핸들링하는것 보다 훨씬 빠르다. 좋은 방법이지만 올바르게 사용해야 한다.
2가지 주의해야할 사항이 있다. “언제 DOM을 다시 렌더링 할것인가?” 와 “어떻게 효율적으로 할 것인가?”

언제.
데이터가 바뀌면 업데이트할 필요가 있다. 하지만 데이터가 바뀌었는지 어떻게 알까?
두가지 방법이 있다. 간단히 생각해서(dirty checking) 데이터의 모든 값을 체크하는 것이다.
두번째 방법으로 (observable)  상태(state)가 바뀌는지 관찰(observe) 하고 있는것이다. 만약 바뀐게 없다면 아무것도 하지 않으면 된다. 만약 바뀌었다면 무엇을 업데이트 해야할지 알게 된다.

어떻게.
가상 DOM 을 실제로 빠르게 하는 것은 무었인가?

  • 효과적인 비교 알고리즘.
  • DOM을 읽고 쓰는 작업
  • 효율적으로 서브 트리만 업데이트하는 것.

위에 나열한 것들은 쉽게 구현하기 힘든 것들이다. 그래서 도움을 받을 라이브러리들이 있다. 제일 유명한 것으로 페이스북의 React JS 가 있다.

React JS

페이스북에서 만든 자바스크립트 라이브러리이다.
React는 자바스크립트 오브젝트에서 가져온, DOM 트리를 흉내낸 가벼운 트리(lightweight tree)를 만든다. 이것으로 HTML을 만들고 HTML 엘리먼트에 append 나 insert 한다. 브라우저가 다시 렌더링 하게 하는 것이다.
React는 라이브러리 이지 프레임웍은 아니다. 그래서 Angular나 Ember와 비교할 순 없다.

다른 라이브러리와 프레임웍

  • virtual-dom by Matt Esch- A JavaScript Virtual DOM and diffing algorithm.
  • Mithril- A Javascript Framework for Building Brilliant Applications.
  • Bobril- Component oriented framework inspired by Mithril and ReactJs.
  • cito.js- avaScript framework for building fast, scalable and modularized web applications.

결론

가상 DOM은 DOM트리를 모방한 가벼운 자바스크립트 Object 를 통해 직접 DOM을 핸들링 하지 않고 퍼포먼스를 향상시킬수 있는 테크닉과 라이브러리, 알고리즘의 모음 이다.
가상 DOM의 아이디어는 훌륭하지만 새로운것은 아니다. 이미 오래전부터 DOM은 비싸다는것을 알고 있었지만 구현하는 방법이 어려웠을 뿐이다.
React와 같은 라이브러리 덕분에 더 나은 퍼포먼스의 어플리케이션을 개발할 수 있게 되었다.

감사합니다.