브라우저 엔진 렌더링 과정
[ 중요 렌더링 경로, Critical Rendering Path ] = 렌더링 엔진이 거치는 전체 프로세스
- HTML 파싱
- CSS 파싱 및 스타일 계산
- 레이아웃(리플로우) ⭐⭐⭐
- 브라우저는 요소의 크기와 위치를 계산하여 화면에 배치 → 이 과정을 리플로우 또는 레이아웃!
- 레이아웃은 요소의 스타일, 크기, 위치 등을 고려하여 화면에 어떻게 표시될지를 결정
+ (아직 화면에 나타나지 않음. 그냥 계산만 해놓는 것!)
- 렌더링 트리 구축
- DOM과 CSSOM(스타일 객체 모델)을 결합하여 렌더링 트리를 생성
- 렌더링 트리는 화면에 표시될 요소의 구조를 나타내는데, 시각적으로 표현되는 요소만 포함
- 렌더링
- 렌더링 트리를 기반으로 브라우저는 화면에 실제로 픽셀을 그리고 색상과 텍스처를 적용하여 최종적인 렌더링을 수행
- Painting (페인팅): ⭐⭐⭐
- 화면에 픽셀을 그리는 프로세스
- 브라우저가 렌더링 트리와 스타일 정보를 기반으로 화면에 실제 그림을 그리고 색상과 텍스처를 적용하는 과정
- 이 단계에서는 브라우저가 화면에 표시할 요소들의 위치, 크기, 색상 등을 고려하여 실제 픽셀로 변환
- Painting은 레이아웃(리플로우)이 발생한 후 이루어짐! - Display (디스플레이):
- 화면에 렌더링된 콘텐츠를 실제로 사용자에게 표시하는 과정
- 이 단계에서는 그려진 픽셀들이 모니터나 디스플레이에 실제로 출력되어 사용자가 볼 수 있음
- 브라우저가 그려진 화면을 사용자에게 보여주는 단계
- 이러한 단계는 사용자가 페이지를 요청하고 브라우저가 페이지를 표시할 때마다 반복
- 페이지의 내용이 변경되면 브라우저는 다시 렌더링 과정을 실행하여 변경 사항을 반영!!
reflow와 repaint(리플로우와 리페인트)
Reflow
- 요소의 크기나 위치 등이 변경되면 브라우저는 해당 요소와 관련된 모든 요소의 레이아웃을 다시 계산
- 변경된 요소의 상위 요소 및 하위 요소에 영향을 줄 수 있음
Repaint
- 변경된 요소의 스타일이나 내용이 변경되면 브라우저는 해당 요소를 다시 그려야 함
- 변경된 요소와 관련된 부분만을 다시 그리게 됨
- 기존 렌더링 과정에서는 변경된 부분만을 업데이트하는 것이 아니라, 전체적인 렌더링 과정을 거쳐 다시 그림. 이러한 점에서 실제 DOM은 변경 사항을 부분적으로 업데이트하기보다는 전체적으로 다시 그리는 것이 일반적.
- 반면에, ⭐🌟 가상 DOM ⭐⭐ 은 변경 사항을 가상 DOM에서 먼저 처리하고, 이후에 실제 DOM과 비교하여 변경된 부분만을 업데이트! 이를 통해 전체적인 렌더링 과정을 최적화 + 성능 향상