DOM / 가상 DOM 차이

DOM

• createElement로 생긴 요소는 메모리에만 가상으로 들어가 있다
• 때문에 append로 실제 화면에 출력되게 추가 처리를 해줘야한다
• append는 지정한 요소 뒤, prepend는 지정한 요소 앞에서 생성
• 요소가 수정/생성/제거되면 브라우저는 변경된 것을 보여주기 위해 랜더링을 한다
• 요소 1개만 변하더라도 브라우저의 랜더링이 발생해 메모리 문제가 생김 -> 느려진다!

 

가상 DOM

• 위의 요소제어/랜더링 문제를 개선하고자 나온 방법(나름 신기술)
• 가상돔의 경우 이미 DOM을 메모리에 복제 후 이벤트 발생 시 메모리 내 DOM에 적용한다
• 메모리 DOM의 변경 사항을 실제 DOM과 비교한다
• 가상돔과 실제 DOM의 차이점만 파악 후 변경된 것들을 한번에 호출해 실시간으로 적용한다