브라우저 렌더링 과정
frontEnd
작성일 : 2024.07.20
저번주에는 웹의 동작방식에 대해 알아보았으니 오늘은 브라우저 렌더링 과정에 대해 알아보려 합니다.
브라우저 렌더링 순서
서버로 부터 파일을 받아오면 다음과 같은 과정을 거칩니다.
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는 결국 브라우저 렌더링에 필요한 최소한의 작업만 계산해 브라우저에게 위임합니다.