웹 페이지 빌드 과정 (CRP, DOM)

DOM?

DOM은 Document Object Model의 약자로, 웹 페이지의 구조화된 표현을 제공하고 이를 조작할 수 있는 인터페이스를 제공하는 프로그래밍 인터페이스입니다. 웹 브라우저는 HTML, XHTML 또는 XML 문서를 파싱하여 이를 트리 형태로 변환하는데, 이를 DOM 트리라고 합니다.

DOM은 웹 페이지의 요소(element)들을 객체로 표현합니다. 각 요소는 문서의 계층 구조에서 노드(node)로 표현되며, 노드는 텍스트, 이미지, 링크, 버튼 등과 같은 요소를 나타냅니다. 이러한 노드들은 상위 요소인 부모(parent)와 하위 요소인 자식(children)을 가질 수 있습니다.

JavaScript와 같은 프로그래밍 언어를 사용하여 DOM에 접근하고 조작할 수 있습니다. DOM을 통해 웹 페이지의 요소들을 동적으로 변경하거나 추가, 삭제할 수 있습니다. 예를 들어, JavaScript를 사용하여 버튼 클릭 시 특정 요소를 숨기거나 보이도록 할 수 있습니다. 또한, DOM을 통해 웹 페이지의 내용을 동적으로 로드하거나 변경하여 사용자와 상호작용하는 웹 애플리케이션을 개발할 수 있습니다.

 

 

CRP?

브라우저가 서버에서 페이지에 대한 html 응답을 받고 화면에 표시하기 전에 여러단계가 있습니다. 이러한 과저을 Critical Render Path라고 합니다.

1. Dom tree생성

 - 랜더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 판단합니다.

2. Render tree todtjd

- dom과 cssom을 결합하는 곳이며, 이프로세스는 화면에서 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력합니다. 즉 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함합니다.

3. Layout 

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

4. print

- 화면에 출력

 

문제점

여기서 문제점은 어떤 인터랙션에 의해서 DOM에 변화가 발생하게 되면 그 때 마다 Render Tree가 재생성 됩니다. 모든 요소들의 스타일을 다시 계산하고 위 CRP과정을 다시 거치게 됩니다. DOM조작에 많은 리소스가 낭비되기때문에  DOM조작이 많을수록 해당 문제점이 더 부각되게 됩니다.

인터렉션 = 상호작용

 

가상 DOM

해당 문제점을 해결하기위해 가상돔이 나왔는데 돔의 인터렉션이 일어나서 새로운 돔이 생기면 이를 이전에 생긴 가상 돔과 비교를해서 바뀐부분만 실제 돔에 적용을 시켜줍니다. 이런 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐부분만 실제 돔에 적용시켜주는것을 재조정이라고 부릅니다.