[협업] 브라우저가 렌더링하는 과정 (feat. React)

 

해당 게시물은 팀 프로젝트를 진행하는 데에 있어서, 'React를 사용했다'라기보다 'React를 쓰면 뭐가 좋은지, 데이터를 어떻게 다루고 있는지'에 초점이 맞추어져 있는 점 양해 부탁드립니다..

웹 브라우저 동작

아래 그림은 웹 브라우저가 서버로 요청을 보내고, 응답 받아 화면을 그리는 과정입니다. Backend Time, Frontend Time으로 구분해서 웹 브라우저가 어떻게 화면을 표시하는지 나타냅니다.

Backend Time
: 렌더링 준비 단계로써, HTML 및 기타 Resources를 수신한다.
Frontend Time
: 렌더링 실행 단계로, Render Tree를 생성하고, Layout 및 Paint를 시도한다.

 

각 단계에서 어떤 일이 일어나는지 파악할 수 있어야 브라우저 렌더링 최적화를 통한 애플리케이션의 응답 속도를 개선할 수 있기 때문에, 브라우저 렌더링 과정에 대해 이해하는 것은 중요합니다.

 

이번 게시물에서는 브라우저의 렌더링 방식에 대해 알아보기 위해 Frontend Time을 중점적으로 다루도록 하겠습니다.

 

---

DOM (Document Object Model) 이란?

DOM Tree

: 하나하나의 Element(HTML)들을 담고 있는 웹 페이지를 Document라고 하는데, 이를 브라우저가 분석해 페이지를 띄어주는 방식

즉, DOM이란 element(HTML)들을 Tree형태로 표현한 것

 

Critical Rendering Path: CRP

: 브라우저가 서버로부터 페이지에 대한 HTML 응답을 받고 화면에 표시하기 위한 여러 단계

즉, 웹 브라우저가 HTML 문서를 읽고, 스타일을 입히고, 뷰 포트에 표시하는 “웹 브라우저의 렌더링 과정”을 뜻합니다.

 

1. DOM Tree 생성

서버로부터 전달받은 HTML문서를 읽어들여, 파싱하여 어떤 내용을 페이지에 렌더링 할지를 결정하는 단계

 

2. Render Tree 생성

브라우저가 DOM과 CSSOM을 결합을 함으로써, 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함하는 최종 렌더링 트리를 생성하는 단계

 

3. Layout(relow)

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

 

4. Paint

실제 화면에 그리는 단계

---

CRP 문제점

어떤 인터렉션에 의해 DOM에 변화가 발생하면, 그 때마다 새로운 Render Tree를 생성하게 됩니다. 이는 곧 모든 요소들의 스타일을 다시 계산해야 하며, Layout, Paint과정을 다시 거치게 되는 것입니다.

 

만약, 인터렉션이 매우 많은 웹이라면 어떻게 일이 발생할까??

작은 변화로 인해, 위에 필요한 과정을 계속 거치게 되니 불필요하게 DOM을 조작하는 비용이 매우 크게 발생합니다.

 

CRP 해결점 - in React

React는 State가 변경될 때마다, Re-Rendering이 발생하는데, 이 시점마다 새로운 내용이 담긴 가상돔을 생성합니다.

출처: Systango

가상 돔(Virtual DOM)

: 실제 DOM과 같은 내용을 담고있는 복사본

• 복사본은 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있습니다.
• 실제 DOM과 다르게, 직접 브라우저 화면의 UI를 조작할 수 있게 해주는 API는 없습니다. (단순 메모리안에 저장된 JS 객체에 불과)
• 하지만, 이 덕분에 가상돔에 접근하고 수정하는 것을 매우 빠르고 가볍게 다룰 수 있습니다. (:= 실제 브라우저에 접근하는 것도 아니다)

 

가상 돔 생성 및 적용 과정

• 렌더링 이전의 화면의 내용을 담고 있는 첫번째 가상돔 - 그림 가장 왼쪽의 가상돔
• 업데이트 이후에 발생할 두번째 가상돔 - 그림 중간의 가상돔

Diffing: 두 가상돔을 비교해, 정확히 어떤 Element가 변했는지를 비교하는 과정

Reconciliation(재조정): 차이가 발생한 부분만을 실제 DOM에 적용하게 되는 것

 

위 두 과정을 통해 React에서는 작은 변화가 있더라도, 부분적인 가상돔 내 내용만을 조작해서 한번에 재조정하는 과정을 통해 매번 DOM을 조작하는 비용을 매우 크게 줄일 수 있는 것입니다.

 

참고) Diffing은 효율적인 알고리즘을 사용해 진행되기 때문에, 어떤 Element에 차이가 있는지를 매우 신속하게 파악할 수 있습니다.

참고) Reconciliation이 효율적인 이유: 변경된 모든 Element들을 집단화시켜, 이를 한번에 실제 DOM에 적용하는 방식인 Batch Update방식을 이용하기 때문에

 

 

참고

https://cresumerjang.github.io/2019/06/24/critical-rendering-path/

https://callmedevmomo.medium.com/virtual-dom-react-핵심정리-bfbfcecc4fbb

https://so-tired.tistory.com/75