(react) 브라우저 렌더링

브라우저 렌더링 과정

1. HTML, CSS 파싱
   : 브라우저는 HTML과 CSS 파일을 읽어서 DOM(Document Object Model)과 CSSOM(CSS Object Model)을 생성함. DOM은 HTML 문서의 구조를 나타내는 트리 구조이고, CSSOM은 스타일 정보를 담고 있는 객체 모델을 말함.
2. 렌더 트리 생성
   : DOM과 CSSOM을 결합하여 렌더 트리를 생성함. 렌더 트리는 화면에 보여질 요소와 스타일 정보를 포함하고 있음.
3. 레이아웃
   : 렌더 트리의 각 요소의 위치와 크기를 계산함.
4. 페인팅
   : 계산된 레이아웃 정보를 바탕으로 실제 화면에 픽셀을 그림.

 

 

React에서 사용하는 가상 DOM이란?

자바스크립트 객체로 표현된 실제 DOM의 복제본으로 메모리 상에서 관리되며, 실제 DOM과 동일한 구조를 가짐.

 

 

가상 DOM이 작동하는 방식은?

• 초기 렌더링: React 컴포넌트가 처음 렌더링될 때, 가상 DOM이 생성
• 상태 변경: 컴포넌트의 상태가 변경되면, 새로운 가상 DOM이 생성
• Diffing: 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 서칭
• 실제 DOM 업데이트: 변경된 부분만 실제 DOM에 반영

 

 

React의 가상 DOM의 장점

• 성능 향상: 실제 DOM의 불필요한 조작을 줄여 웹 어플리케이션의 성능 향상
• 데이터 바인딩: 데이터 변경에 따른 UI 업데이트를 자동화하여 개발작업을 간소화
• 복잡한 UI 관리: 가상 DOM을 통해 복잡한 UI 로직을 효율적으로 관리
• 추상화: 개발자는 실제 DOM에 대한 복잡한 세부 사항을 신경 쓰지 않고 UI개발만 다룰 수 있음.

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path

Critical rendering path - Web performance | MDN