크롬 브라우저 엔진

홍한솔·2021년 12월 9일
1

크롬 아키텍처

위 그림은 크롬의 아키텍처이다.

크롬은 멀티 프로세스 아키텍처를 사용한다.

이 그림에서 가장 중요한 2개의 프로세스는 브라우저 프로세스와 렌더 프로세스이다.

브라우저 프로세스는 브라우저 엔진이라고 생각하면 된다.
하지만 렌더링 엔진은 렌더 프로세스 안의 구성품에 불과하다.

브라우저 프로세스

  • 브라우저 프로세스는 브라우저에서 모든 렌더 프로세스들과 UI를 그리는데에 책임을 가지는 프로세스이다.

  • 브라우저 프로세스는 main/UI 스레드, I/O 스레드를 가지고 있다.

  • main/UI 스레드는 웹 페이지를 렌더링 하는데에 책임이 있는 스레드이다

  • I/O 스레드는 브라우저 프로세스와 렌더 프로세스들간의 IPC 통신을 책임지는 스레드다.

브라우저 프로세스 = main/UI 스레드 + I/O 스레드이다.

Main/UI 스레드에는 4개의 객체가 존재한다.

RenderProcessHost 객체

  • renderViewHost 에게 renderProcess에게서 받는 view-specific message 를 전달하고 non-view-mseesage 를 처리하는 역할을 한다.
  • renderProcess와는 1:1 관계이다

RenderViewHost 객체

  • 이 객체는 RenderProcessHost 에게 view-specific message를 전달 받는다
  • RenderProcessHost 와의 관계는 1:n 인데, renderProcess가 생산하는 renderView 객체가 여러개일 수 있기 떄문이다 (웹 페이지 + 팝업)
  • 이 객체는 input events를 받거나 (받는다면 렌더러 프로세스에게 전달함) webpage를 그리는 역할을 한다.

webContents 객체

  • 이 객체는 웹페이지의 1개 탭을 표현해 준다.

  • webpage를 직사각형 모양으로 display 하는 역할을 한다.

  • Browser 객체 browser window를 표현하고 여러개의 webContent 객체를 가진다.

I/O thread

Channel 객체

  • pipe 로 대화하기 위한 메서드가 정의되어 있으며 render process들과의 IPC 통신을 담당한다
  • ResourceDispatcherHost 객체 network request를 보내는 역할을 담당한다.
  • 만약 render process가 네트워크 request를 보내길 원할 때 RenderProcessHost에게 먼저 보낸 후 RenderProcessHost가 * * ResourceDispatcherHost 에게 이 요청을 전달한 후 이 객체가 네트워크 상으로 요청을 보낸다.

Render Process

  • Main Thread와 render Thread로 구성되어 있으며 렌더링 엔진은 Render Process의 한 요소이다.
  • 웹 페이지를 구성하는 역할을 담당한다.
  • 즉 크롬 브라우저에서 탭 안에서 일어나는 거의 모든 일을 담당한다

브라우저 프로세스와 렌더 프로세스와의 관계는 1:n 관계이다

Main Thread

  • RenderProcess 쓰레드 간 통신 (브라우저 프로세스의 I/O thread <-> 렌더 프로세스 Main Thread && 렌더 프로세스 Main Thread <-> 렌더 프로세스 Render Thread ) 를 담당한다.

Render Thread

  • ResourceDispatcher 웹 페이지가 서버한테 fetch 요청을 보낼때가 있다.
  • render process는 인터넷에 접근할 방법이 없다.
  • 그래서 이 객체가 이를 IPC를 통해 가능하도록 한다. (요청을 RenderProcess 객체를 통해 브라우저 프로세스에게 전달함)

Webkit

  • 크롬에서 사용되는 렌더링 엔진이다. DOM 트리를 형성하고 웹 페이지의 레이아웃을 잡는 역할을 한다.
  • 2개의 주요한 객체를 가진다.
  • WebCore 객체는 핵심 레이아웃 함수를 가지고 있으며 JavaScriptCore는 V8 엔진이다.

크롬 브라우저 요청 과정

이제 위에서 학습한 내용을 토대로 크롬 브라우저에서 url 입력창에 어떤 주소를 입력했을 때 어떤 작업이 일어나는지 살펴보자.

  1. 브라우저 프로세스 - Main 스레드가 주소창에 입력된 값이 url 인지 검색어 인지 확인 -> 요청할 곳 (검색 엔진 or 페이지 이동) 결정

  2. I/O 스레드를 통해 요청을 보냄

  3. I/O 스레드가 응답이 들어오면 content-type을 확인하여 html 인지 다운로드 받을 파일인지 확인 -> zip 이라면 다운로드 매니저에게 전달

  4. 만약 html일 경우 메인 스레드를 통해 담당 렌더 프로세스를 알아냄 -> IPC를 통해 HTML 데이터 전달

  5. 렌더링 엔진의 작동

참고 사이트

profile
낭만있는 개발자

0개의 댓글