브라우저가 그려지는 원리

웹페이지 빌드 과정(Critical Rendering Path: CRP)

브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다. 웹 브라우저가
HTML문서를 읽고 스타일을 입히고 뷰포트에 표시하는 과정이다.

1) 서버에서 브라우저에게 HTML 문서를 전달
2) DOM Tree 생생: 브라우저의 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할 지 결정한다.
3) Render Tree 생성: 브라우저가 DOM과 CSSOM을 결합하는 곳이며 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 포함하는 최종 렌더링 트리를 출력한다. 즉 화면에 표시되는 모든 노드와 콘텐츠 및 스타일 정보를 포함한다.
4) Layout: 브라우저가 페이지에 표시되는 각 요소의 크기과 위치를 계산하는 단계
5) Paint: 실제 화면에 그리는 작업

최적화

• Critical Rendering Path 최적화: 렌더링에 중요한 자원들을 우선적으로 로드하여 첫 번째 페인트 시간을 줄인다.
• CSS 및 JavaScript 최소화: 파일 크기를 줄이고 네트워크 전송 시간을 단축한다.
• 비동기 로드: JavaScript 파일을 비동기로 로드하여 렌더링 차단을 피한다.
• 이미지 최적화: 이미지 크기 및 포맷을 최적화하여 로딩 시간을 단축한다.

가상돔(VDOM)

여기서 문제점은 어떤 인터렉션에 의해 DOM 변화가 발생하면 그 때 마다 Render Tree가 재생성 된다. 즉 모든 요소들의 스타일을 다시 계산하고 Layout, Repaint 과정까지 다시 거친다.
인터렉션이 많아진다면 이를 해결하기 위해 불필요하게 DOM을 조작하는 일이 발생한다.

이러한 문제를 해결하기 위해 등장한 것이 가상돔(VDOM)이다. 가상돔이란 실제 DOM을 메모리에 복사해둔 것이다.

작동

데이터가 바뀌면 가상돔에 랜더링하고 이전에 생긴 가상돔과 비교하여 바뀐 부분만 실제 돔에 적용시킨다. 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(Reconciliation)이라고 부른다.

가상돔을 통해 요소가 많이 바뀌더라고 한번에 묶어서 실제돔에 적용하여, 돔을 조작하는 비용이 줄어든다.