브라우저에서 웹 페이지 렌더링하는 방법과 과정

일상 속에서 우리는 검색, 클릭을 통해 많은 웹사이트를 접하고 있고,
각 사이트들은 수초안에 우리가 보는 화면을 그려줍니다.
이 짧은 수초 안에 일어나는 과정을 알아보려 합니다.

1. 요청과 응답

사용하는 브라우저에서 웹 페이지의 URL을 입력하면
DNS를 통해 IP 주소로 변환 되고,
해당 IP를 가지는 서버에 요청을 보냅니다.
이 과정은 HTTP 요청을 통해 이루어지며,
HTML, CSS, JS, 이미지, 폰트 등의 리소스를 응답으로 받습니다.

• 브라우저 : 인터넷에서 웹 페이지를 검색하고 보는 데 사용되는 소프트웨어
  (크롬, 사파리, 웨일 등)
• DNS : 인터넷에서 도메인 이름을 IP 주소로 변환하는 시스템

2. HTML 파싱(Parsing)과 DOM(Document Object Model) 생성

다운로드 한 리소스들을 파싱하여 문서 구조를 이해합니다.
응답으로 받은 HTML 문서는 텍스트로만 이루어져있기 때문에
파서(Parser)는 HTML 문서를 토큰 단위로 분해하고,
이를 기반으로 문서의 구조를 파악합니다.
이 단계에서 문서 내의 요소(Element), 속성(Attribute),
텍스트 등의 정보를 추출합니다.

파싱된 HTML 문서를 기반으로 브라우저는
DOM(Document Object Model) 트리를 생성합니다.
DOM은 문서의 구조를 표현하는 트리 구조로,
각 HTML 요소는 DOM 노드(Node)로 변환됩니다.
DOM 트리는 웹 페이지의 구조와 내용을 추상화하여
JavaScript와 같은 스크립트 언어에서 접근하고 조작할 수 있는 인터페이스를 제공합니다.

위 과정이 필요한 이유는 HTML 문서를
브라우저는가 이해할 수 있는 형태로 바꾸는 작업이기 때문이다.

• 파싱 : 문자열이나 코드의 구문을 분석하여 의미 있는 구조로 변환하는 과정
• 파서 : 프로그래밍 언어나 마크업 언어와 같은 구문을 분석하고
  해석하는 소프트웨어
• 토큰 : 문법적 의미를 갖는 코드의 최소 단위
• 노드 : 문서 내의 요소를 나타내는 객체

3. CSS 파싱과 CSSOM 생성

브라우저는 HTML 문서에서 외부 스타일 시트(CSS)를 찾고,
필요한 CSS 파일을 다운로드합니다.
HTML 문서 내에 내장된 스타일 요소 style 및
인라인 스타일 속성style="..."도 파싱됩니다.
다운로드한 CSS 파일은 파서에 의해 파싱되어 스타일 규칙이 추출됩니다.

파싱된 CSS 규칙은 DOM 트리의 각 노드에 적용됩니다.
이때, 스타일 규칙의 우선순위, 상속 등의 규칙을 고려하여
각 요소에 최종적으로 적용되는 스타일을 계산합니다.
이 과정에서 요소의 크기, 위치, 색상, 글꼴 등의 스타일 정보가 결정됩니다.
이렇게 파싱하여 만든 트리를 CSSOM 이라고 합니다.

4. 렌더 트리 생성

구조를 담당하는 DOM 트리와 스타일을 담당하는 CSSOM 트리를 결합하여,
렌더 트리를 생성합니다.
렌더 트리는 실제로 화면에 렌더링 되는 목적으로 만드는 트리로
실제로 화면에 보이는 요소만 포함 됩니다.
meta 태그 같은 정보 전달 태그나, head, script 등은
렌더 트리에 포함되지 않습니다.

5. 레이아웃 생성

렌더 트리의 각 요소에 대해 위치와 크기를 계산하여
브라우저 창 내에서의 정확한 배치를 수행합니다.
이 과정은 요소의 상대적인 위치, 부모 요소와의 관계, 브라우저 창의 크기 등을 고려하여 수행됩니다.
이 단계를 리플로우(reflow)라고도 부르며, 요소의 크기나 위치 등이
변경될 때마다 다시 수행되어야 합니다.

6. 페인팅

레이아웃이 완료되면, 브라우저는 렌더 트리의 각 요소에 대해
실제 픽셀을 그리는 페인팅 과정을 수행합니다.
이 단계에서는 요소의 배경색, 텍스트, 이미지 등이 화면에 표시됩니다.
페인팅은 화면을 갱신하여 사용자에게 보여지는 결과물을 생성합니다.

7. 완료

페인팅이 완료되면 웹 페이지의 렌더링이 완료됩니다.
사용자는 최종적으로 브라우저에 렌더링된 페이지를 볼 수 있게 됩니다.

3줄 요약

1. URL에 해당하는 IP 서버로 요청을 보내 리소르를 응답 받는다.
2. HTML 문서를 파싱하여 DOM, CSSOM 트리를 만들고 합쳐
   렌더 트리를 만든다.
3. 레이아웃을 생성하고, 페인팅하여 사용자에게 보여준다.