브라우저 렌더링(Critical Rendering path)과 리액트 렌더링(React Rendering)

브라우저 렌더링 과정 (Critical Rendering path)

critial rendering path는 브라우저에서 화면이 보여질 때까지의 과정을 말한다

브라우저에서 html의 문서를 다운로드 후, 페이지를 렌더링 하기까지의 과정을 살펴보자

 

크게 4가지 과정으로 이루어진다

1. DOM +CSSOM 트리 생성
2. Render 트리 생성 
3. Layout
4. Painting

 

1. DOM + CSSOM 생성 (브라우저 렌더링 엔진이 파싱)

브라우저 렌더링 엔진이 html 문서를 파싱하여, 해석하기 위한 노드 객체로 변환된 객체 트리인 DOM 트리를 생성한다

 

CSS도 마찬가지로 파싱하여 CSSOM 트리를 생성한다

DOM (Document Object Model)
CSSOM (CSS Object Model) 

 

2. Render 트리 생성

만들어진 DOM트리와 CSSOM트리를 합쳐 Render 트리를 생성한다

만들어진 Render트리는 웹페이지의 청사진으로, 화면에 실제로 그릴 요소들이 스타일이 적용된 상태로 포함되어 있다

 

3. Layout (Reflow)

Render 트리를 기반으로 각 노드들이 스크린에서 위치할 좌표/위치가 정해진다

 

4. Painting (Repaint)

계산된 Layout 정보를 바탕을 화면에 요소들이 나타난다

@naver Dev

 

화면 업데이트가 되는 과정

JS가 DOM을 수정하면 업데이트 발생한다

즉, DOM이 수정되면 Critical Rendering path 재 실행되는 것이다

 

이때 웹 페이지의 레이아웃을 다시 계산하는 과정인 Reflow, 화면에 다시 그리는 Repaint 과정은 비싼 과정이다

이 과정이 잦으면 웹 성능이 악화되는 것이다

reflow : DOM 요소 추가/제거, 브라우저 크기 변경, 요소 스타일 변경 등 발생
repaint : 시각적 스타일 변경, 요소 텍스트 변경, visibility 속성 변경 등 발생

 

이러한 문제를 해결하는 방법은 동시에 발생하는 업데이트를 모아서 한번에 수정하는 것이다!

이렇게 모아서 업데이트 하는 과정을 리액트에서는 자동으로 해준다 🌟🌟

 

리액트 렌더링 과정 (React Rendering Process)

리액트 렌더링 과정은 3가지로 발생한다

1. trigger
2. rendering
3. committing

 

1. trigger

리액트에서 렌더링을 촉발하는 조건을 말한다

1. 컴포넌트 첫 렌더링
2. state 변경
3. 부모 컴포넌트로 전달받는 props의 변경
4. 부모 컴포넌트가 리렌더링 될 때 

 

2. rendering

React 컴포넌트가 렌더링 해야하는 UI를 Virtual DOM이라는 객체로 변환하는 과정을 말한다

 

컴포넌트를 호출한 결과는 엘리먼트이다

엘리먼트는 컴포넌트가 렌더링하는 모든 UI 정보를 가지고 있는 객체이다

 

즉, 이러한 엘리먼트를 모아서 Virtual DOM을 생성하는 과정이다

@winterlood 블로그

 

3. committing

rendering 과정에서 만들어진 Vritual DOM을 실제 DOM에 반영하는 과정이다

이때 critical rendering path 과정이 실행된다!

 

변경 사항을 모아서 한번에 업데이트 하기 때문에 대부분의 상황에서 충분히 빠른 속도로 화면 업데이트가 이루어진다

 

리액트에서 업데이트가 발생할땐

2번 과정인 rendering 과정을 다시 실행하게 된다

 

이때 업데이트가 반영된 Virtual DOM과 업데이트 전 상태의 Virtual DOM 2가지를 비교(diffing)하여 

이 둘의 차이점을 반영하여 실제 DOM에 업데이트 하게 된다

 

여기서 두개의 Virtual DOM을 비교하는 과정을 재조정(Reconciliation)이라고 한다

이 과정을 통해 동시에 발생한 업데이트를 모아서 한번에 업데이트를 한다