<aside> ✨ Create Date: 2023/01/13 Update Date: 2023/01/16

Inside look at modern web browser (part2)을 번역한 글입니다. 오역이 있을 수 있습니다.

</aside>

해당 글은 4부로 나뉘어 있으며 시리즈에서는 높은 수준의 아키텍처에서 렌더링 파이프라인의 세부 사항까지 Chrome 브라우저의 내부를 살펴볼 예정입니다.

이번 챕터는 Chrome의 내부 동작을 살펴보는 4부작 시리즈 중 2번째 파트입니다.

이 게시물에서는 웹 사이트를 표시하기 위해 각 Process와 Thread가 통신하는 방법에 대해 자세히 설명합니다.

웹 브라우징의 간단한 사용 사례를 먼저 보겠습니다.

저희가 브라우저에 URL을 입력하면 브라우저가 인터넷에서 데이터를 가져와 페이지를 표시합니다.

이 게시물에서는 사용자가 사이트를 요청하고 브라우저가 페이지를 렌더링할 준비하는 부분(내비게이션)에 중점을 둘 것입니다.

Browser Process에서 시작하기

그림1: Browser UI에서 동작하는 Browser Process 다이어그램 / UI, 네트워크, Storage thread가 포함되어 있다.

그림1: Browser UI에서 동작하는 Browser Process 다이어그램 / UI, 네트워크, Storage thread가 포함되어 있다.

part1에서 이야기했듯이 탭 외부의 모든 것은 Browser Process에서 처리됩니다.

Browser Process에는 브라우저의 버튼과 입력 창을 그리는 UI thread, 인터넷에서 데이터를 받기 위해 네트워크 스택을 처리하는 network thread, 파일에 대한 접근을 제어하는 storage thread가 있습니다.

주소창에 URL을 입력한 이후 발생되는 작업은 Browser Process의 UI thread에 의해 처리되는 작업입니다.

간단한 Navigation

1단계, input 처리

그림1: 입력이 검색어인지 URL인지 묻는 UI thread

그림1: 입력이 검색어인지 URL인지 묻는 UI thread