DOM
- Document Object Model
- 다큐먼트(웹페이지)를 객체로 표현하는 모델
- 자바스크립트가 이용할 수 있는(메모리에 보관할 수 있는) 객체
- DOM은 HTML과 스크립트언어를 서로 연결해 줌
브라우저가 DOM을 랜더링하는 순서
스타일 -> 레이아웃 -> 페인트 -> 합성
- 브라우저는 html태그를 파싱하여 DOM 트리 구성
- 동시에 스타일시트에서 CSS 파싱하여 스타일 규칙 생성 - DOM 트리와 스타일 규칙을 합쳐서 렌더 트리 생성
- 렌더 트리는 화면에 반영되는 것만 가지고 있어서 HTML의 모든 정보를 표현하는 DOM 트리와 1:1 관계는 성립되지 않음
->렌더 트리에 없어도 DOM 트리에 있을 수 있음
DOM 변경의 단점
기존에는 화면의 변경사항을 DOM을 직접 조작하여 브라우저에 반영
- DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신됨
-> 화면에서 수정사항 5개가 발생하면 수정할 때마다 새로운 렌더 트리가 5번 수정되면서 새롭게 만들어짐
-> 불필요한 렌더링 : 더 많은 부화와 속도 저하 초래 - 메모리 누수
-> 만일 개발자가 strong 태그를 찾는 코드를 변수에 저장하지 않은 채 매번 strong에 관련된 접근 메서드를 사용하면 매 단계 마다 수 많은 document 객체들을 전부 훑으며 찾는 현상이 발생됨
가상 DOM
- DOM 변경의 단점을 해결하기 위해 만들어진 것 -> 실제 DOM을 조작하는 대신 이것을 추상화 시킨 자바스크립트 객체인 가상DOM 사용
- 실제 DOM의 사본 같은 개념
가상 DOM의 변경사항 반영절차
- 변화가 일어남 -> 변화된 버전을 가상DOM으로 바꿈 (데이터가 업데이트 되면 전체 UI를 가상DOM에 리렌더링함)
- 가상DOM끼리 비교 -> 변화 전의 가상DOM과 변화된 가상DOM을 비교
- 바뀐 부분만 적용 -> 바뀐 부분만 실제 DOM에 적용함으로써 레이아웃 계산은 1번만 이행됨
