위 그림은 크롬의 아키텍처이다.
크롬은 멀티 프로세스 아키텍처를 사용한다.
이 그림에서 가장 중요한 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 입력창에 어떤 주소를 입력했을 때 어떤 작업이 일어나는지 살펴보자.
-
브라우저 프로세스 - Main 스레드가 주소창에 입력된 값이 url 인지 검색어 인지 확인 -> 요청할 곳 (검색 엔진 or 페이지 이동) 결정
-
I/O 스레드를 통해 요청을 보냄
-
I/O 스레드가 응답이 들어오면 content-type을 확인하여 html 인지 다운로드 받을 파일인지 확인 -> zip 이라면 다운로드 매니저에게 전달
-
만약 html일 경우 메인 스레드를 통해 담당 렌더 프로세스를 알아냄 -> IPC를 통해 HTML 데이터 전달
-
렌더링 엔진의 작동
참고 사이트