virtual dom

  • 모든 컴포넌트는 매 렌더링 시마다 새로운 돔 트리를 생성
  • react는 새로운 돔 트리를 기존 돔 트리와 비교한 뒤, 변경 사항을 브라우저의 돔에 적용

장점:

  • 렌더링 함수를 구현할 때 어떤 프로그래밍 언어든 사용 가능하므로, 컴파일할 필요가 없음. React는 주로 JSX를 사용하지만, plain javascript를 사용할 수도 있음.
  • 렌더링된 컴포넌트의 결과를 얻을 수 있어서 테스트나 디버깅에 사용할 수 있음.

Incremental dom

  • 구글에서 만듬
  • key idea: 모든 컴포넌트들은 각각 자체 렌더링 엔진이 되는 코드로 컴파일됨. 이 엔진들은 DOM 트리를 데이터가 바뀔 때 올바른 위치에 업데이트하거나 만듬.
  • 구글의 2가지 목표
    • tree shakable: dom 트리에서 사용하지 않는 node 제거
    • low memory footprint: 적은 메모리 사용량

tree shakable이 되는 이유

프레임워크 자체(런타임)에서 컴포넌트를 바로 해석하지 않고, 컴포넌트는 특정 코드(명령)들을 참조한다. 만약 참조하지 않고 있으면 아예 사용되지 않는다. 이 행동은 번들에서가 아니라 컴파일 시점에서 하기때문에 사용하지 않는 코드를 제거할 수 있다.

반면 virtual dom 은 런타임 때 컴포넌트가 해석된다. 컴파일 시점에 필요한지 필요하지 않은지 알 수 없기 때문에 항상 브라우저로 보내야한다.

적은 메모리 사용량을 갖는 이유

virtual dom은 매 렌더링 마다 전체 트리를 새로 만들지만,

incremantal dom은 dom이 바뀌지 않았을 때는 렌더링하는데 memory가 전혀 필요하지 않다. 오직 dom node가 추가되거나 제거될때만 필요하다. 크기도 dom 트리 전체가 아니라 dom 변경 사이즈만큼만 할당된다.

참조:

https://d2.naver.com/helloworld/59361

https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36