01. 브라우저의 렌더링 동작과정

• 랜더링이란 ?

HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

랜더링 과정

0. 전반적인 흐름을 생각해보자

• 사용자가 웹사이트 접속 => 서버로 부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운 => (여기서부터 랜더링 과정시작)HTML 코드는 DOM, CSS는 CSSOM 트리를 생성(1,2,3)

1. DOM tree 생성

• 변환 : 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(예: UTF-8)에 따라 개별 문자로 변환합니다.
• 토큰화 : 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환합니다.
• 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 “객체”로 변환됩니다.
• DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결이 됩니다.

2. CSSOM tree 생성

• DOM 트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성

3. 렌더링 트리(Rendering Tree) 생성

• DOM 트리와 CSSOM 트리가 만들어지면, 이 둘을 결합해서 렌더링 트리를 생성

4. 레이아웃(Layout) 단계

• 레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box 모델이 출력

5. 페인팅 단계

• 마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환 => 레이아웃 단계에서 모든 계산이 완료가 되면, 화면에 요소들을 그리게 된다. 이 단계를 페인팅 또는 래스터화라고 함.

• 이미 레이아웃 단계에서 각 노드들이 위치, 크기, 색상 등 스타일이 모두 계산이 되었기 때문에 화면에 실제 픽셀로 변환

리플로우(Reflow), 리페인트(Repaint)

• 리플로우 : 사용자가 웹 페이지에 처음 접속을 하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 됩니다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생되는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 됩니다. 이런 변경을 통해 영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 됩니다. (position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow)

• 리페인트 : 리플로우는 단지 변경사항을 반영하기 위해서 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고, 실제 이 결과를 화면에 그려지기 위해서는 다시 페인팅 단계를 수행해야 합니다. (background, color, text-decoration, border-style, border-radius)

레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우(Reflow) 수행 없이 바로 리페인트(Repaint)만 수행

(리플로우가 일어나면 반드시 리페인트가 일어납니다)

02. 왜 알아야 하는가 ?

• 브라우저 렌더링 프로세스를 아는 것은 웹 페이지가 로드되고, 렌더링되고, 사용자에게 표시되는 방식을 이해하는 데 도움이 되기 때문에 프론트앤드 개발자에게 매우 중요하다.