저번주에는 웹의 동작방식에 대해 알아보았으니 오늘은 브라우저 렌더링 과정에 대해 알아보려 합니다.

브라우저 렌더링 순서

서버로 부터 파일을 받아오면 다음과 같은 과정을 거칩니다.

1. HTML 파싱

브라우저는 HTML 파일을 읽고 DOM 트리를 생성합니다.

script 태그를 만나면 코드 실행을 위해 DOM 생성을 중단합니다.
이 부분을 방지하기 위해 문서의 가장 마지막에 스크립트 태그를 삽입하거나 외부에 파일이 있는경우 비동기 적으로 로드해 성능을 개선할 수 있습니다.

2. CSS 파싱

CSS 파일을 읽어 CSSOM 트리를 생성합니다.

3. DOM과 CSSOM 결합 (렌더 트리 생성)

두 트리를 결합하여 렌더 트리를 생성합니다.

4. 레이아웃 (Layout)

렌더 트리의 각 요소의 크기와 위치를 계산합니다.

5. 페인팅 (Painting)

요소의 스타일을 화면에 그립니다.

자바크스립트가 DOM이나 CSSOM을 변경하는 경우 리렌더링이 이루어집니다.

6. 컴포지팅 (Compositing)

여러 레이어를 결합하여 최종 화면에 출력합니다.

참고 자료

React의 렌더링 과정

브라우저의 렌더링을 알게되었는데 그러면 React의 렌더링 과정이 어떻게 될까

1. 컴포넌트 렌더링

상태(state)나 속성(props)이 변경되면 React는 render() 메서드 또는 함수형 컴포넌트의 JSX를 호출합니다.

2. 가상 DOM 업데이트

변경된 UI를 가상 DOM에 업데이트하고, 실제 DOM과 비교하여 차이점을 찾습니다.

3. 재조정

가상 DOM과 이전 DOM을 비교하여 최소한의 변경 사항만 실제 DOM에 반영합니다.

참고 자료

브라우저 렌더링과 React 렌더링의 차이점

브라우저 렌더링은 높은 비용의 작업들(Layout, Paint 등)이 포함되므로 빈번한 DOM 조작은 성능 문제가 있을 수 있습니다.
React 렌더링은 이러한 문제를 해결하기 위해 가상 DOM을 도입하여, 최소한의 DOM 업데이트로 성능을 최적화하고 애플리케이션의 반응성을 유지합니다.
React는 결국 브라우저 렌더링에 필요한 최소한의 작업만 계산해 브라우저에게 위임합니다.