Web Navigation 과정

Hyor·2022년 12월 23일

web

브라우저 구성

브라우저는 위 그림과 같이 구성되며 아래와 같이 프로세스들이 담당합니다.

Brower Process

주소 표시줄, 북마크, 뒤로가기 및 앞으로가기 버튼을 포함하여 브라우저를 제어하고 네트워크 요청 및 파일 액세스을 처리합니다.
브라우저 프로세스에는

브라우저의 버튼과 입력 필드를 그리는 UI thread
인터넷에서 데이터를 수신하기 위해 네트워크 스택을 처리하는 Network thread
파일에 대한 액세스를 제어하는 Storage thread

등과 같은 스레드가 있습니다.

Render Process

탭 내부의 모든 것을 제어합니다.

Plugin Process

플래시와 같이 웹 사이트에서 사용하는 모든 플러그인을 제어합니다.

GPU Process

다른 프로세스와 별도로 GPU 작업을 처리합니다. GPU가 여러 앱의 요청을 처리하고 동일한 표면에 그리기 때문에 다른 프로세스로 분리됩니다

Search

Handling input

사용자가 주소 표시줄에 입력하면 UI 스레드는 "이것이 검색어입니까 아니면 URL입니까?" 라고 묻습니다.
Chrome에서 주소 표시줄은 검색 입력 필드이기도 하므로 UI 스레드는 사용자를 검색 엔진으로 보낼지 또는 요청한 사이트로 보낼지 여부를 구문 분석하고 결정합니다.

사용자가 Enter 키를 누르면 UI 스레드가 네트워크 스레드를 호출하여 사이트 콘텐츠를 가져옵니다.
로딩 스피너는 탭 모서리에 표시되며 네트워크 스레드는 DNS 조회 및 요청에 대한 TLS 연결 설정과 같은 적절한 프로토콜을 거칩니다.
이 시점에서 네트워크 스레드는 HTTP 301과 같은 서버 리디렉션 헤더를 수신할 수 있습니다. 이 경우 네트워크 스레드는 서버가 리디렉션을 요청하는 UI 스레드와 통신합니다. 그런 다음 다른 URL 요청이 시작됩니다.

Read response

실제 데이터인 Content-Type 및 페이로드를 포함하는 응답 헤더
응답 본문이 들어오기 시작하면 네트워크 스레드는 필요한 경우 스트림의 처음 몇 바이트를 확인합니다.
응답의 Content-Type 헤더는 데이터 유형을 말해야 하지만 누락되거나 잘못되었을 수 있으므로 MIME 유형 스니핑이 수행됩니다.

응답이 HTML 파일인 경우 다음 단계는 렌더러 프로세스에 데이터를 전달
zip 파일이나 다른 파일인 경우 다운로드 요청이므로 데이터를 다운로드 관리자에게 전달

도메인과 응답 데이터가 알려진 악성 사이트와 일치하는 것으로 보이면 네트워크 스레드가 경고 페이지를 표시하도록 경고합니다.
민감한 사이트 간 데이터가 렌더러 프로세스에 전달되지 않도록 하기 위해 CORB (Cross Origin Read Blocking)검사가 수행 됩니다.

Find a render process

모든 검사가 완료되고 네트워크 스레드가 브라우저가 요청된 사이트로 이동해야 한다고 확신하면 네트워크 스레드는 데이터가 준비되었음을 UI 스레드에 알립니다. 그런 다음 UI 스레드는 웹 페이지 렌더링을 수행할 렌더러 프로세스를 찾습니다.

네트워크 요청이 응답을 받는 데 수백 밀리초가 걸릴 수 있으므로 이 프로세스의 속도를 높이기 위한 최적화가 적용됩니다. UI 스레드가 Start navigation에서 네트워크 스레드에 URL 요청을 보낼 때 탐색한 사이트를 이미 알고 있습니다.
UI 스레드는 네트워크 요청과 병렬로 렌더러 프로세스를 사전에 찾거나 시작하려고 시도합니다. 렌더러 프로세스는 네트워크 스레드가 데이터를 수신했을 때 이미 대기 위치에 있습니다. 탐색이 교차 사이트로 리디렉션되는 경우 이 대기 프로세스가 사용되지 않을 수 있으며, 이 경우 다른 프로세스가 필요할 수 있습니다.

이제 데이터와 렌더러 프로세스가 준비되었으므로 탐색을 커밋하기 위해 브라우저 프로세스에서 렌더러 프로세스로 IPC(Inter Process Communication)가 전송됩니다. 또한 렌더러 프로세스가 HTML 데이터를 계속 수신할 수 있도록 데이터 스트림을 전달합니다. 브라우저 프로세스가 렌더러 프로세스에서 커밋이 발생했다는 확인을 받으면 탐색이 완료되고 문서 로드 단계가 시작됩니다.

이때 주소 표시줄이 업데이트되고 보안 표시 및 사이트 설정 UI에 새 페이지의 사이트 정보가 반영됩니다. 탭의 세션 기록이 업데이트되어 뒤로/앞으로 버튼이 방금 탐색한 사이트를 통해 이동합니다. 탭이나 창을 닫을 때 탭/세션 복원을 용이하게 하기 위해 세션 기록이 디스크에 저장됩니다.

탐색이 커밋되면 렌더러 프로세스는 리소스 로드를 계속하고 페이지를 렌더링합니다. 렌더러 프로세스가 렌더링을 "완료"하면 IPC를 다시 브라우저 프로세스로 보냅니다(이는 onload페이지의 모든 프레임에서 모든 이벤트가 발생하고 실행이 완료된 후임). 이 시점에서 UI 스레드는 탭에서 로딩 스피너를 중지합니다.