브라우저 렌더링 과정
주소창에 google.com을 입력하였을 때, 일어나는 일에 대하여 공부해보았습니다.
DNS에 요청
주소창에 "google.com"을 입력하면, 다음과 같은 일련의 과정이 일어납니다.
-
브라우저는 DNS(Domain Name System) 서버에 "google.com"이라는 도메인 주소를 요청합니다. 이때, DNS는 해당 도메인에 대한 IP 주소를 응답합니다.
-
브라우저는 응답받은 IP 주소를 이용해 해당 서버로 요청(Request)을 보냅니다. 요청은 HTTP(Hypertext Transfer Protocol)를 통해 이루어지며, 이때 요청 방식은 GET이 기본입니다.
-
서버는 요청(Request)을 받으면, 요청받은 페이지를 찾아서(또는 동적으로 생성하여) 브라우저에게 응답(Response)합니다.
-
브라우저는 응답받은 데이터를 파싱(Parsing)하고, 렌더링(Rendering)하여 사용자가 볼 수 있는 화면을 생성합니다. 이때, HTML, CSS, JavaScript 등의 리소스를 다운로드하고, 이를 조합하여 렌더링합니다.
DNS는 인터넷상의 도메인 이름을 IP 주소로 변환해주는 서비스입니다. 인터넷에서 컴퓨터들은 IP 주소를 이용하여 서로 통신하며, DNS를 이용하면 사용자는 IP 주소를 기억하지 않아도 도메인 이름으로 서비스에 접속할 수 있습니다. DNS는 계층형 구조로 이루어져 있으며, 루트 DNS 서버에서부터 하위 DNS 서버로 쿼리를 전달하여 해당 도메인의 IP 주소를 찾아냅니다.
렌더링
브라우저는 서버로부터 응답(Response)받은 데이터를 파싱하여 렌더링합니다. 이때, HTML 문서는 DOM(Document Object Model) 트리로 변환되고, CSS는 CSSOM(CSS Object Model) 트리로 변환됩니다. 렌더링 엔진은 DOM과 CSSOM을 결합하여 렌더링 트리(Rendering Tree)를 생성하고, 이를 이용해 브라우저 창에 화면을 그립니다.
HTML, CSS, JavaScript 파일을 브라우저가 렌더링하는 과정은 다음과 같습니다.
HTML Parsing 및 DOM Tree 구축
브라우저는 HTML 파일을 읽어 DOM(Document Object Model) Tree를 구축합니다.
DOM Tree는 HTML 파일의 각 요소(element)들을 계층적으로 구조화하고, 각각의 요소는 노드(node)라고 불리며, 노드는 부모-자식 관계로 구성됩니다.
CSS Parsing 및 CSSOM Tree 구축
브라우저는 CSS 파일을 읽어 CSSOM(CSS Object Model) Tree를 구축합니다.
CSSOM Tree는 각각의 요소에 적용된 CSS 스타일 정보를 계층적으로 구조화합니다.
Render Tree 생성
브라우저는 DOM Tree와 CSSOM Tree를 결합하여 Render Tree를 생성합니다.
Render Tree는 화면에 표시되는 노드들만으로 구성된 트리입니다. 따라서, CSS에 display:none 또는 visibility:hidden 등의 속성이 적용된 요소는 Render Tree에 포함되지 않습니다.
Layout
Render Tree의 각 노드들의 크기와 위치를 계산하여 브라우저의 뷰포트(Viewport) 안에 배치합니다.
Layout은 각 노드들의 위치와 크기를 계산하는 과정입니다.
Paint
Layout이 완료되면, 각 노드들의 실제 픽셀 값을 결정합니다.
Paint는 노드들의 실제 픽셀 값을 결정하고, 브라우저의 화면에 렌더링하는 과정입니다.
Composite
Paint가 완료되면, 브라우저는 각 노드들을 화면에 그립니다.
Composite은 화면에 그려진 노드들을 합성하여 최종 이미지를 생성하는 과정입니다.
이러한 과정을 통해 HTML, CSS, JavaScript 파일이 브라우저에서 렌더링되어 사용자가 웹 페이지를 볼 수 있게 됩니다.
