WEB - Browser Rendering Process

브라우저 렌더링은 웹 페이지를 표시하기 위해 사용자가 브라우저 주소창에 URL을 입력하면서부터 브라우저가 수행하는 과정입니다.

순서는 아래와 같이 진행됩니다.

HTML Parsing

브라우저는 HTML 문서를 파싱하여 문서의 구조를 이해합니다.
DOM 트리를 생성하여 문서의 요소, 속성, 텍스트 등을 표현합니다.

CSS Parsing, CSSOM 생성

브라우저는 CSS 스타일 시트를 파싱하여 문서의 스타일 규칙을 이해합니다.
스타일 규칙은 요소의 크기, 위치, 색상 등을 정의합니다.

Render Tree 생성

브라우저는 DOM 트리와 CSS 스타일 시트를 결합하여 Render Tree를 구성합니다.
Render Tree는 렌더링할 요소와 스타일 정보를 포함합니다.

Layout (Reflow)

브라우저는 Render Tree를 기반으로 요소의 크기와 위치를 계산합니다.
요소의 레이아웃 정보를 계산하여 브라우저 창에 렌더링할 위치를 결정합니다.

Painting

브라우저는 Render Tree의 요소를 기반으로 실제 화면에 그립니다.
브라우저는 요소의 배경색, 텍스트, 그림자 등을 그리고, 화면에 출력합니다.
이러한 과정을 거쳐 브라우저는 웹 페이지를 렌더링하게 됩니다. 브라우저 렌더링 과정에서는 렌더링 성능을 향상시키기 위한 다양한 최적화 기법이 사용됩니다. 예를 들어, 브라우저는 필요한 부분만 다시 그리는 리플로우(reflow)와 리페인트(repaint)를 최소화하기 위해 레이아웃 정보를 캐시(cache)할 수 있습니다. 또한, 자바스크립트 실행을 지연시키거나 비동기(asynchronous)로 처리함으로써 렌더링 성능을 향상시킬 수 있습니다.

리플로우와 리페인트

• 리플로우는 DOM요소의 기하학적 속성이 변경될 때, 브라우저 사이즈가 변할때, 스타일시트가 로딩되었을 때 발생하는 변화들을 다시 계산해주는 작업을 뜻한다. 즉 레이아웃을 다시 계산하는 것이라고 생각할 수 있다. (설계작업)
• 리페인트는 이렇게 변경된 레이아웃을 화면에 다시 그려주는 작업을 뜻한다. 리플로우가 발생하면 필연적으로 리페인트가 실행된다. (디자인 작업)
• 리페인트는 리플로우보다 가벼운 작업이다.