브라우저의 렌더링 과정과 Virtual Dom

브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용합니다.

DOM(Document Object Model)은 브라우저 렌더링 엔진의 HTML parser에 의해 생성된 '트리' 구조의 Node 객체 모델이며

DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 스크립팅 언어로 수정할 수 있도록 만들어진, 웹 페이지의 객체 지향 표현입니다. DOM은 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다.

React에서 사용하는 가상 DOM도 실제 DOM 내용에 기반하여 만들어집니다. 

실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM을 조작하는 작업은 무겁기 때문입니다. 그래서 React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM을 만들어서 관리합니다. 가상 DOM은 일종의 DOM의 메타데이터, DOM의 요약본이라고 볼 수 있습니다.

 

결론 : DOM은 브라우저가 해석할 수 있도록 변환한 데이터 구조

 

화면에 콘텐츠를 보여주기 위해 필요한 리소스 3가지 html, css, javascript

 

브라우저가 화면에 보여지기까지 과정

 

HTML 파싱 과정

• 브라우저가 서버로 HTML을 요청하면 서버는 바이트 형태로 응답
• 브라우저는 html의 meta태그에 있는 charset의 인코딩 방식으로 바이트를 문자열로 반환
• 변환 환 문자열을 위에서부터 읽으면서 문법적인 의미를 갖는 코드의 최소 단위인 토큰으로 분리
• 각 토큰들을 객체로 변환하여 DOM의 구성 요소인 노드 생성
• HTML elements 간의 중첩 관계에 따라 노드들을 트리 자료구조로 생성
• DOM트리 완성

CSS 파싱 과정

• HTML과 동일
• 바이트  > 문자열 > 토큰 > 노드 > CSSOM (CSS Object Model)

Render Tree

• DOM + CSSOM
• 브라우저 각각의 DOM과 CSSOM을 생성하고 나면 렌더링을 위한 렌더 트리로 결합
• 렌더 트리는 말그대로 화면에 시각적인 요소를 표시하기 위한 구조
• 그래서 화면에 그릴 필요가 없는 노드들은 제외 (ex. display none 속성, meta태그 등)
• HTML 요소들을 위치와 크기를 계산하는 데 사용(Lay out)  (이때 가장 큰 연산 비용이 발생한다.)
• 렌더 트리로 결합 후 실제로 브라우저 화면을 그리는 렌더링 진행(페인트 과정)

Javascript 파싱

• html과 css는 브라우저의 렌더링 엔진이 처리하는 것과 달리 자바스크립트는 자바스크립트 엔진이 처리
• ART(추상적 구문 트리)를 진행
• 토크 나이징: 문자열로 되어 있는 자바스크립트 코드를 최소한의 의미를 갖는 토큰으로 분해
• 파싱:토큰들을 구문 분석하여 토큰에 문법적인 의미와 구조를 반영한 AST 생성
• AST를 바이트 코드로 변환한 후 실행

자바스크립트 파싱과정

 

렌더링 과정

페이지에 들어가면 해당 페이지에 필요한 리소스들을 서버에 보내게 되는데  먼저 HTML을 요청하게 됨

HTML 파싱을 시작하고   CSS파일을 만나면 CSS리소를 요청하게 된다. 그 후에 CSS 파싱을 시작하고

CSS 파싱이 완료되면 다시 HTML 파싱을 시작하게 됨 그러다 다시 Javascript 파일을 만나면 리소스 요청을 하고 

Javascript파싱이 완료되면 다시 HTML파싱을 하게 된다.

 

Virtual DOM

• 기술의 진화와 함께 인터렉션도 증가
• 빈번한 DOM 업데이트 > 빈번한 브라우저 렌더링 (Object Model 생성 > 렌더 트리 결합 > 레이아웃 > 페인트 )

화면을 바꿔주는 역할이 많이 지게 돼서 생겨나게 됨 만약 RealDOM에서 직접 변경을 하게 되면

 (Object Model 생성 > 렌더 트리 결합 > 레이아웃 > 페인트 ) 이 과정을 RealDOM이 변경됨에 따라 계속 실행하게 된다.

VirtualDOM 과 Real DOM

사진과 같이 RealDOM과 Virtual DOM이 비교를 해서 변경된 사항을 파악해서 단 한 번만 화면을 업데이트해준다.

Virtual DOM

Virtual DOM은 빠르지 않다. 사진과 같이 Virtual DOM은 리 렌더링 방식은 많은 메모리를 필요로 한다.

Incremental DOM

Incremental DOM은 Virtual DOM과 반대되는 성질로 DOM을 업데이트하는 경우 변경되는 노드만큼의 

메모리만 할당시키기 때문에 메모리를 절약한다.

 

DOM은 느리고 VItual DOM은 빠르다는 것은 사실이 아니며!

DOM 변경이 빈번하게 발생할 때 DOM 업데이트 횟수 측면에서 효율적일 뿐이다!

 

React가 Virtual DOM을 선택한 이유는?

버그가 일어나는 부분에서 디버깅을 통해 추적하는 부분의 어려움을 겪으면서  데이터가 변할 때 Virtual DOM을 통해

한 번만 데이터가 렌더링 될 때 버그를 추적하는 방식으로 사용하게 되었다고 한다.

 

React의 자동화와 추상화

• 개발자는 수동으로 DOM을 조작하고, DOM 변경을 위해 상태를 하나하나 추적할 필요가 없음
• 상태에 따라 결과를 보여줘야 하는 UI만 관리하면 DOM을 직접 변경하는 로직은  자동으로 React가 담당한다!