가상돔

 

웹 페이지 빌드 과정

 

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다.

웹브라우저가 HTML 문서를 읽고, 스타일을 입히고 뷰포트에 표시하는 과정

 

 

DOM tree 생성

렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 랜더링 할 지 결정

🔻

Render tree 생성

브라우저가 DOM과 CSSON을 결합하는 곳, 화면에 보이는 모든 컨텐츠와 스타일 정보를 모두 포함하는 최종 랜더링 트리를 출력

즉, 화면에 표시되는 모든 노드의 컨텐츠 및 스타일 정보를 포함

🔻

Layout (reflow)

브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계

🔻

Paint

실제 화면에 그리기

 

 

 

❗️문제점

 

어떤 인터렉션에 의해 DOM에 변화가 발생하면

그때마다 Render tree가 재생성됨.

즉, 모든 요소들의 스타일을 다시 계산..

Layout과 Repaint 과정까지 다시 거치게 된다.

 

인터렉션이 적은 웹이면 괜찮지만 인터렉션이 많다면..?

작은 변화로 인해 해당 과정을 계속 거치게 되니 불필요한 비용이 커진다.

 

 

⭕️  해결 방안

가상돔 (Virtual DOM)

가상 돔이란 실제 DOM을 메모리에 복사해준 것

 

데이터가 바뀌면 가상 돔에 랜더링 되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만

실제 돔에 적용을 시켜줌

바뀐 부분을 찾는 과정을 Diffing 이라고 하며,

바뀐 부분만 실제 돔에 적용시켜 주는 것을 재조정(reconcilation) 이라고 부른다.