TIL 93. 웹페이지가 브라우저에 랜더링되는 과정

각 브라우저마다 차이가 있을 수 있지만 대체로 아래 순서로 진행

1. 브라우저 캐시를 확인합니다.

2. 캐시에 저장된 IP주소가 없으면, UDP로 DNS서버에 해당 도메인을 요청합니다

3. 도메인 찾은 후 브라우저에 전송합니다.

4. 브라우저는 TCP 연결 설정 후 GET요청을 합니다.

5. HTML 파싱: 웹페이지가 서버에서 브라우저로 전송될 때, 브라우저는 HTML 코드를 읽고 파싱하여 DOM(Document Object Model) 트리를 만듭니다. 이 트리는 노드(node)로 구성되어 있으며, 각 노드는 HTML 요소(element)와 해당 요소의 속성(attribute) 및 값, 그리고 텍스트 노드(text node) 등을 포함합니다.

6. CSS 파싱: 브라우저는 HTML 파싱 과정에서 CSS 파일을 로드하고, 이를 파싱하여 스타일 규칙(style rule)을 생성합니다. 이 규칙은 해당 요소에 적용되는 스타일 속성(property)과 값(value)으로 구성됩니다.

7. 레이아웃: 브라우저는 DOM 트리와 스타일 규칙을 기반으로 요소의 크기와 위치를 계산하여 레이아웃을 만듭니다. 이 과정에서 브라우저는 뷰포트(viewport)의 크기, 요소의 위치 및 크기, 그리고 플로팅(floating) 및 인라인 블록(inline block) 요소 등을 고려합니다.

8. 페인트: 브라우저는 레이아웃을 기반으로 각 요소를 화면에 그리고 페인트합니다. 이 과정에서 브라우저는 각 요소의 배경색, 테두리, 그림자 등을 고려하여 그리고, 페인트 순서에 따라 레이어(layer)를 만들어 겹치는 요소를 적절히 처리합니다.

9. 자바스크립트 실행: 만약 웹페이지에 자바스크립트 코드가 포함되어 있다면, 브라우저는 해당 코드를 실행합니다. 이 과정에서 자바스크립트는 DOM 요소를 조작하거나 레이아웃을 변경하는 등의 작업을 수행할 수 있습니다.

10. 리플로우(Reflow)와 리페인트(Repaint): 만약 자바스크립트 실행 등으로 인해 레이아웃이 변경된 경우, 브라우저는 해당 요소를 포함한 상위 요소부터 다시 레이아웃을 계산하고 페인트합니다. 이 과정을 리플로우(Reflow)와 리페인트(Repaint)라고 합니다.