브라우저는 어떻게 렌더링될까?

알아보기 전에!

브라우저란?
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
이 때 자원은 HTML 문서, PDF, 이미지 등 다양한 형태를 띌 수 있다.
자원의 주소는 URL에 의해 정해진다.

렌더링이란?
서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아 브라우저에 뿌려주주는 것

렌더링 순서!

1. HTML 구문 분석

브라우저는 웹 페이지의 HTML 마크업을 파싱하는 것으로 시작한다.
HTML 코드를 한 줄씩 읽고, 이를 DOM (문서 객체 모델) 트리로 변환한다.
DOM 트리는 페이지 구조를 나타내며, HTML 요소 간의 관계를 정의한다.

DOM 트리란?
문서 객체 모델 트리 (Document Object Model tree)의 줄임말로, HTML 요소를 계층적으로 표현한 것. 브라우저의 렌더링 엔진이 웹 페이지의 HTML 코드를 구문 분석하고 처리할 때 생성된다.

2. CSS 파싱

HTML이 구문 분석되면 브라우저는 링크 또는 인라인 CSS 스타일 시트를 구문 분석한다.
그러면 CSS에 정의된 스타일을 나타내는 CSSOM(CSS 객체 모델) 트리가 생성된다.
CSSOM 트리는 DOM 트리와 결합되어 렌더링 트리를 생성한다.

CSSOM 트리란?
CSS 객체 모델 트리 (CSS Object Model tree)의 줄임말로, CSSOM 트리는 웹 페이지의 HTML 요소에 적용된 CSS 스타일을 표현한 것. 브라우저의 렌더링 엔진이 웹 페이지의 CSS 코드를 파싱하고 처리할 때 생성.

3. 렌더링 트리 구성

렌더링 트리는 HTML과 CSS를 결합한 시각적 표현이다.
여기에는 페이지에 있는 각 요소의 레이아웃 및 스타일에 대한 정보가 포함되어 있다.
렌더링 트리는 DOM 트리와 CSSOM 트리를 결합해 구성된다.
페이지에 표시되는 요소와 관련 스타일만 포함되며, JavaScript를 통한 수정사항을 고려한다.

렌더링 트리란?
렌더링 트리는 웹 페이지에서 HTML 요소의 시각적 레이아웃을 나타내는 DOM 트리와 CSSOM 트리의 조합이며, 렌더링 트리는 브라우저의 렌더링 엔진이 렌더링 프로세스의 일부로 생성한다.

렌더링 트리에는 각 요소에 적용된 CSS 스타일과 JavaScript를 통한 수정 사항을 고려해 페이지에 표시되는 요소만 포함된다. 즉, 숨겨진 요소나 너비와 높이가 0인 요소와 같은 DOM 트리의 일부 요소는 렌더링 트리에 포함되지 않을 수 있다.

4. 레이아웃

렌더링 트리가 구성되면 브라우저는 페이지에 있는 각 요소의 레이아웃을 결정한다.
브라우저는 콘텐츠, 스타일 및 CSS에 정의된 레이아웃 규칙을 기반으로 각 요소의 크기와 위치를 계산한다.

5. 페인팅

레이아웃이 결정되면 브라우저는 렌더 트리의 콘텐츠로 화면의 픽셀을 페인팅한다. 화면의 지정된 위치에 각 요소를 렌더링해 웹페이지의 시각적인 표현을 만든다.

6. 합성

마지막으로 브라우저는 그려진 요소를 합성해 최종 디스플레이를 만든다.
CSS에 정의된 중첩 또는 투명도 효과를 고려해 각 요소의 픽셀을 최종 이미지로 결합한다.

참고
JavaScript가 DOM, CSSOM을 변경하는 경우 리렌더링을 한다.

알아두기
리플로우 : 레이아웃을 다시 계산하는 것
리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인팅을 하는 것

주의할 점!
렌더링 순서는 브라우저마다 다를 수 있고, 같은 브라우저라도 브라우저의 버전마다 다를 수 있다.
또한, 렌더링 프로세스는 브라우저 확장 프로그램, 플로그인 및 사용자 설정과 같은 요소의 영향을 받을 수 있다.

웹 페이지가 브라우저에 렌더링되는 과정을 설명해주세요!

1. 브라우저에서 웹 페이지에 최초로 GET 요청을 보내게 되면, 브라우저는 브라우저 캐시를 확인합니다. 만약 캐시에 저장된 값이 없다면 OS 캐시를 확인합니다.

2. 캐시에 저장된 IP 주소가 없으면, 브라우저는 로컬 네트워크에 연결된 DNS 서버에 UDP를 사용해 질의를 보냅니다.

3. DNS 서버는 해당 도메인을 찾을 때까지 다른 DNS 서버에 리커시브한 요청을 보내고 최종적으로 DNS 서버에서 해당 도메인 이름에 대한 IP 주소를 찾으면 브라우저에 전송하게 됩니다.

4. 브라우저는 이를 받아 TCP 연결을 설정하고, 해당 IP 주소로 GET 요청을 보내게 됩니다. 이후 서버에서 응답을 받은 HTML을 통해 DOM트리, CSSOM트리를 생성하게 되고 두 트리를 합쳐 렌더트리를 구성하게 됩니다.

5. 렌더트리를 토대로 브라우저는 레이아웃 박스를 그리게되고, 이후 페인팅 과정을 통해 클라이언트에 정보를 표시하게 됩니다.

Recursive Query?
Local DNS 서버가 여러 DNS 서버를 차례대로 물어봐서 그 답을 찾는 과정