참고:
https://www.youtube.com/watch?v=gc-kXt0tjTM
1. 등장배경
기존 브라우저의 작동원리는 아래와 같다.
Process: 브라우저 렌더엔진이 ①HTML Parsing → ②DOM tree 생성 → ③CSS Parsing → ④CSSOM Tree 생성 → ⑤Render tree 생성(DOM + CSSOM) → ⑥Layout → ⑦Paint
이때 인터랙션이 발생해 DOM에 변화가 발생하면 그때마다 Render tree가 재생성되고 위 과정을 매번 다시 거치게된다. (비효율적인 연산작업이 실행된다.) 그리고 SPA의 사용성이 높아지면서 DOM tree의 조작이 보다 더 많아졌다.
DOM 조작은 자바스크립트가 관리를 하기 때문에 DOM 조작을 더욱 더 효율적으로 할 수 있게끔 최적화가 필요해진것이다. 그래서 등장한 것이 Virtual DOM이다.
2. Virtual DOM의 등장과 작동원리
- Virtual DOM은 HTML의 추상화 버전이다. 실제 DOM 객체와 같은 속성들을 가지고 있지만, 실제 DOM이 가지고 있는 API(getElementById, createElement 등...)는 가지고 있지 않다.
- 최초 로드 시 렌더링 소요시간이 다소 길 수 있다. (이는 사용자 경험을 해치지 않는 정도이다.) 하지만 이후 모든 실행은 정상적이다.
Process: 데이터 변경 → ①Virtual DOM에 두개의 tree가 생성된다.(old vs new) → ②diffing 알고리즘에 의해 바뀐 부분을 감지한다. → ③모든 변화를 묶어서 업데이트한다.(batch update)
하여 HTML DOM에 적용시킨다.(synchronize virtual DOM과 HTML DOM) 이때 HTML DOM이 전체적으로 바뀌지 않고 변경이 필요한 부분만 변경된다. 즉, 부분적으로만 렌더링된다는 부분에서 기존 브라우저의 작동원리와 다르다.
3. Virtual DOM의 생김새
Virtual DOM은 HTML 객체에 기반한 자바스크립트 객체로 표현할 수 있다.
Virtual DOM이 빠른 이유는 Virtual DOM은 메모리상에서만 동작하고 실제 렌더되지 않아 연산비용이 적기 때문이다.
요소가 100개가 바뀌었다고 레이아웃을 100개씩 새로 만드는 것이 아니라 모든 변화를 하나로 묶어서(batch update) 딱 한번만 실행시킨다.
댓글