Skip to content

Latest commit

 

History

History
39 lines (21 loc) · 2.12 KB

Browser Render.md

File metadata and controls

39 lines (21 loc) · 2.12 KB

브라우저 렌더링 원리

1. DOM, CSSOM 생성

  • HTML 파싱: 브라우저가 서버로부터 받은 HTML 문서를 파싱하여 DOM (Document Object Model) 트리를 구성합니다.
  • CSS 파싱: 동시에 CSS 파일(내부, 외부, 인라인)도 파싱하여 CSSOM (CSS Object Model) 트리를 구성합니다.

2. 렌더 트리 생성

  • DOM + CSSOM 결합: DOM 트리와 CSSOM 트리가 결합되어 렌더 트리(Render Tree)를 형성합니다. 렌더 트리는 화면에 실제로 보여지는 요소들만을 포함하고, 스타일 정보를 담고 있습니다.

3. 레이아웃 (Reflow)

  • 노드의 위치와 크기 계산: 각 노드의 정확한 위치와 크기를 계산합니다. 이 단계에서는 상대적인 값들이 실제 화면상의 절대값(픽셀 단위)으로 변환됩니다.

4. 페인팅 (Repaint)

  • 화면에 그리기: 계산된 레이아웃에 따라 요소들을 화면에 그립니다. 여기서는 배경색, 그림자, 이미지 등의 시각적 스타일이 적용됩니다.

이 과정을 통해 사용자에게 웹 페이지가 시각적으로 표현됩니다. 또한, JavaScript의 실행이나 이미지 로딩 등의 다른 작업도 병행하면서 진행됩니다. 사용자와의 상호작용이나 CSS 변화에 따라 렌더 트리, 레이아웃, 페인트 과정은 다시 일어날 수 있으며, 이를 리플로우(reflow)와 리페인트(repaint)라고 합니다. 최적화된 웹 페이지는 이러한 과정들을 최소화하여 성능을 향상시키려 합니다. (하드웨어 가속)

DOM & 가상 DOM ?

DOM

Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미

가상 DOM

추상화 된 DOM. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되어있다.

Reference

Back