본문 바로가기
Web

[CS] 브라우저에 URL을 입력하면 일어나는 일

by 펭귄알 2024. 12. 19.

멀티 프로세스 브라우저

브라우저 프로세스

  • 주소 표시줄, 북마크, 뒤로/앞으로 버튼 등 UI 요소 제어
  • 다른 프로세스들과의 조율 및 관리 담당

렌더러 프로세스

  • 웹 페이지 콘텐츠 처리 및 표시
  • 탭마다 별도의 프로세스 생성

GPU 프로세스

  • 여러 탭의 렌더링 작업을 통합 처리
  • 하드웨어 가속을 위한 별도 프로세스로 분리

플러그인 프로세스

  • 웹사이트에서 사용하는 플러그인 제어
  • 캡처 플러그인, OneTab 등의 기능 처리

유틸리티 프로세스

  • 네트워크 요청, 파일 접근 등 권한이 필요한 작업 처리

프로세스끼리는 IPC(Inter Process Communication, 프로세스간 통신)을 사용한다.

사용자가 브라우저에 URL을 입력 후 웹사이트가 보이기 까지의 과정

Handling inputs

사용자가 URL에 Text를 입력하면

  • Browser Process 안에 UI Thread가 Text의 종류 판별
    • Search Query / URL
  • URL일 경우 Network Thread로 URL을 전달 대기합니다.

Start Navigation

User가 Enter키를 누를때

  1. UI Thread 가 Network Call을 초기화(Network Thread 에게 URL을 전달) 합니다.
  2. Loading Spinner 작동합니다.
  3. 네트워크 스레드는 DNS 조회 및 TLS 연결 설정과 같은 프로토콜을 처리합니다.

UI Thread가 왜 Network Call을 초기화 하나요??

  • Loading Spinner의 작동 유무를 판단하기 위해서는 UI Thread에서 초기화를 시켜야 응답이 완료되었는지 안되었는지 알 수 있습니다.

Read Reponse

Response Body가 Network Body로 들어올 때

  1. Network Thread가 필요하면 Response의 일부를 읽습니다.
  2. Response Header의 Content-Type으로 Type을 확인합니다.
  3. Type을 정확하게 확인하여 MIME Type을 추론 → Data Stream을 미리 읽어 이 데이터가 유효한지 검사합니다.
  4. Content-Type 구분
    1. HTML형식일 경우 Renderer Process에 파일 전달 준비합니다.
    2. 아닐 경우 Zip이나 다른형식일 경우 Download Manager에게 파일 전달을 준비합니다.
  5. Safe Browsing : Domain / Data가 이상할 경우 → 경고 페이지
  6. CORB(Cross-Origin-Read-Blocking) : 민감한 Cross-Site-Data는 Renderer Process에게 전달하지않습니다.
    1. Same Origin일 경우에는 Renderer Process에게 전달합니다.
    2. 위 내용과 반대되는 Cross-Origin 일경우 Same-Origin-Policy를 위반하여 Renderer Process에게 전달하지않습니다.

Find Renderer Process

Network Thread에서 확인이 끝난 후에 브라우저가 사이트를 이동해야할 때

  1. Network Thread가 Data Is Ready라고 UI Thread에게 전달합니다.
  2. UI Thread가 미리 찾아놓거나 시작한, Render Process 에게 Data(HTML File)을 전달합니다.
    • Network Request에는 얼정 시간(ms) 소요 되기 때문에, Start Navigation 단계에서 미리 UI Thread가 Network Thread에게 URL을 전달 하여 미리 Renderer Process를 탐색합니다.

Commit Navigation

Data, Renderer Process가 준비 되었을 경우

  1. Browser Process가 Renderer Process에게 IPC를 보냅니다.
  2. Data Stream도 송신 합니다.
    1. Renderer Process Process가 HTML Data를 계속 받을수 있도록
  3. Browser Process가 Renderer Process로 부터 Commit Navgation 이 완료되었다는 응답을 수신합니다.
  4. Navigation 종료
  5. Document Loading Phase 시작
    1. 주소창 업데이트
    2. 보안 표시
    3. 사이트 설정 UI 갱신
    4. Session History에 Tab Update

 

사용자가 브라우저에 URL을 입력하고 웹사이트가 보이기까지의 과정은 우리가 작성한 React와 같은 라이브러리로 작성된 코드가 실행되기 전에 발생하는 중요한 단계에 대해 알아보았는데, 평소에 몰랐던 부분도 많았고 브라우저의 작동원리를 상세하게 알게된 것 같아 좋은 주제 였던것 같습니다!

티스토리툴바