DOM이란

• DOM(Document Object Model)은 웹 페이지를 이루는 HTML 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다

DOM의 문제점

• DOM은 트리구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질수록 속도가 느려진다
• 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 렌더 트리가 10번 수정되면서 새롭게 만들어진다

DOM의 변경 시 일어나는 일

• 브라우저는 HTML을 구문 분석하여 변화가 일어난 노드를 찾는다
• DOM 요소를 업데이트한다
• 부모 및 자식 노드에 대한 CSS를 다시 계산한다
• Reflow(성능 저하의 원인)
• 마지막으로 브라우저 디스플레이에 페인딩된다(Repaint)

Virtual DOM

• DOM이 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 전달하여 딱 한번만 렌더링을 진행한다
  • 10개의 수정사항이 생기더라도 1번만 렌더링된다.
• Virtual DOM은 실제 DOM에서 처리하는 방식이 아닌 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다
• 주로 React js, Vue js에서 사용된다
• 실제 스크린에 렌더링하는 것이 아니기 때문에 DOM을 직접 업데이트하는 것보다 상대적으로 빠르다