yngmanie 블로그

모던 웹 브라우저의 이해

10 Jan 2021

기본 개념

  • CPU: Central Processing Unit
  • GPU: Graphics Processing Unit
    예전에는 그래픽만 처리하는 용도였지만 지금은 아님
  • Process: 어플리케이션의 실행프로그램
  • Thread: 프로세스 내부에서 프로그램을 실행할 수 있는 최소 단위

프로그램이 실행되면 메모리에 해당 프로세스를 할당하며, 프로세스간 통신이 필요하면 IPC(Inter Process Communication)를 이용한다.

크롬브라우저 동작방식

단순 탐색

1.입력 처리

  • 브라우저 프로세스의 Ui스레드가 검색어인지 url인지 판단.

2. 탐색 시작

  • Enter키를 누르눈 순간 브라우저 프로세스의 네트워크 스레드가 네트워크 요청을 함.

3. 응답 읽기

  • 네트워크 스테드가 header의 Contert-Type과 (필요하면) payload의 처음 몇 바이트를 확인 함.
    Content-Type과 다른 데이터일 수 도 있기때문에

  • 응답 값이 HTML 파일이면 랜더러 프로세스에 데이터를 전달, zip 또는 다른 형식의 파일이면 다운로드 매니저에게 파일 전달.

4. 랜더러 프로세스 찾기

  • 이상이 없다면 네트워크 스레드는 UI스레드에게 데이터가 준비되었다고 알리고, UI스레드는 페이지를 랜더링할 렌더러 프로세스를 찾음

5. 탐색 수행

  • 브라우저 프로세스에서 랜더러 프로세스로 IPC 전송을 하고 브라우저 프로세스는 탐색 완료 후 문서 로딩시, 앞/뒤로가기 버튼 탭/세션 복구 기능 등 추가적인 작업을 함.

6. 초기로딩 완료

  • 랜더러 프로세스가 랜더링이 끝나면 IPC로 브라우저에게 랜더링이 완료된 것을 알리고 Ui스레드는 탭의 스피너가 돌고 있는 것을 종료 시킴.

7. 다른사이트 탐색

  • beforeunload 이벤트 처리 확인 창을 단거나, 이동할때 팝업을 뛰우는 듯 브라우저 프로세스가 랜더러프로세스에게 확인 요청

랜더러 프로세스의 내부 동작

성능 측면에서 관련이 있음

  • 랜더러 프로세스에 포함된 스레드
    • 메인 스레드
    • 워커 스레드
    • 컴포지터 스레드
    • 레스터 스레드

1. 파싱

  • 메인 스레드가 DOM 생성

2. 추가 리소스 로딩

  • 불 필요한 통신을 막기위해 메인 스레드는 ‘사전 로드 스케너’를 실행.
    * 자바스크립트가 파싱을 중단할 수 있음. 그 이유는 자바스크립트가 DOM 구조를 바꿀 수 있기 때문이다.

3. 스타일 계산

  • 메인 스레드가 CSS 파싱

4. 레이아웃

5. 페인트

6. 커밋

  • 페이팅까지 끝나면 메인스레드는 컴포지트 스레드에게 커밋을 함.

7. 컴포지팅

  • 컴포지터 스레드는 레이어를 쪼개 레스터라이징을 하고 레스터 스레드에게 전달.
    레스터 라이징: 디자인을 픽셀로 변환하는 작업.
    컴포지팅: 한 페이지를 여러 레이어로 나누고 레스트하며, 컴포지터 스레드에서 합성을 하는 기술.

8. GPU 메모리에 저장

관련있는 포스트