Chrome 웹 브라우저 내부 아키텍처 및 동작 살펴보기 (1부)

1부에서는 핵심 컴퓨팅 용어와 Chrome의 다중 프로세스 아키텍처에 대해 살펴봅니다.

 

CPU & GPU

브라우저가 실행되는 환경을 이해하려면 컴퓨터 부품과 역할에 대해 이해하여야 합니다.

 

CPU

CPU(Central Processing Unit)는 "중앙 처리 장치"라고 불리며, 컴퓨터의 두뇌 역할을 합니다. CPU에는 CPU core가 있어, 많고 다양한 작업을 하나씩 처리합니다.

core가 작업을 하나씩 처리함

과거에는 대부분 CPU가 단일 칩이었습니다. 최신 하드웨어에서는 종종 두 개 이상의 CPU core를 사용하여 휴대폰, 데스크탑 등 과거에 비해 더 좋은 컴퓨팅(Computing) 성능을 제공합니다.

 

GPU

GPU(Graphics Processing Unit)는 "그래픽 처리 장치"라고 불립니다. CPU와 달리 GPU는 동시에 여러 core를 사용하여 간단한 작업을 처리하는 데 능숙합니다. 이름에서 알 수 있듯이 그래픽을 처리하기 위해 처음 개발되었습니다. 따라서, GPU를 지원하는 것은 빠른 렌더링과 부드러운 상호 작용를 할 수 있게 해줍니다.

동시에 간단한 작업을 처리하는 GPU

 

일반적으로 애플리케이션(Application)은 운영체제의 메커니즘을 사용하여 CPU와 GPU에서 실행이 됩니다.

컴퓨터 아키텍처의 세 계층. 맨 아래에 기계 하드웨어, 중간에 운영 체제, 맨 위에 응용 프로그램

 

프로세스 및 스레드

브라우저 아키텍처의 이해를 위해, 프로세스(Process)와 스레드(Thread)에 대해서도 살펴봐야합니다.

 

프로세스는 응용프로그램이 실행되어 메모리에 적재가 된 프로그램, 즉 "실행 프로그램"이라고 할 수 있습니다. 스레드는 프로세스의 실행 흐름이라고 할 수 있다.

프로세스와 스레드

 

운영 체제는 프로세스에 작업할 메모리 "슬랩"을 제공하고, 해당 개인 메모리 공간에 적재됩니다. 응용 프로그램을 닫으면 프로세스도 사라지고 운영 체제에서 메모리를 확보합니다.

메모리에 적재되는 프로세스(스레드 포함)

 

프로세스는 운영 체제에 다른 작업을 실행하기 위해 다른 프로세스를 가동하도록 요청할 수 있습니다. 이 경우 새 프로세스는 메모리의 다른 부분에 적재됩니다.

IPC(Inter Process Communication)를 사용하여, 두 프로세스가 통신 할 수 있습니다. 많은 응용 프로그램이 이러한 방식으로 작동하도록 설계되어 작업자 프로세스가 응답하지 않는 경우, 응용 프로그램의 다른 프로세스를 중지하지 않고 다시 시작할 수 있습니다.

프로세스가 중지되더라도 다른 프로세스에 영향을 주지않고 다시 시작할 수 있음

 

브라우저 아키텍처

브라우저 아키텍처를 설계하는 방법에는 표준이 없습니다. 따라서 브라우저마다 아키텍처가 다를 수 있습니다. 최신 Chrome을 기준으로 살펴보면, 다중 프로세스 아키텍처 형식으로 구성되어 있습니다.

Chrome의 다중 프로세스 아키텍처

 

Chrome의 프로세스는 아래와 같이 구성됩니다.

• Browser Process
  • 주소 표시줄, 책갈피, 뒤로 및 앞으로 버튼을 포함한 응용 프로그램의 "크롬" 부분을 제어
  • 네트워크 요청 및 파일 액세스와 같이 웹 브라우저의 보이지 않는 권한 있는 부분을 처리
• GPU Process
  • 다른 프로세스와 분리되어 GPU 작업을 처리. GPU가 여러 앱의 요청을 처리하고 동일한 표면에 그리기 때문에 다른 프로세스로 분리됨
• Plugin Process
  • 웹사이트에서 사용하는 모든 플러그인(예: flash)을 제어
• Renderer Process
  • 웹사이트가 표시되는 탭 내부의 모든 것을 제어하며, 각 탭마다 하나씩 프로세스가 생성됨
• Extension process, Utility Process 등

각 프로세스마다 영역을 나눠서 작업을 수행

 

다중 프로세스 아키텍처의 장점

Renderer Process로 예시를 들면, 3개의 탭이 열려있고 각 탭은 독립적인 Renderer Process에 의해 실행됩니다. 그 중 탭 1개가 응답하지 않게 된다고 해도 각 탭마다 다른 Renderer Process로 실행되고 있기 때문에 다른 탭을 유지 할 수 있다는 장점이 있습니다.

 

만약, 단일 프로세스로 실행되고 있었다면, 한 탭이 응답을 멈추면 다른 탭들에도 영향을 주게됩니다.

 

각 탭은 독립적인 Renderer Process에 실행되어, 서로 다른 탭에 영향을 주지 않는다

 

또 다른 이점으로는 보안과 샌드박싱입니다. 브라우저는 특정 기능에서 특정 프로세스를 샌드박스할 수 있습니다. (예를 들어 Chrome 브라우저는 Renderer Process와 같이 임의의 사용자 입력을 처리하는 프로세스에 대해 File Access를 제한함)

 

다중 프로세스 아키텍처의 단점

프로세스에는 고유한 개인 메모리 공간이 있기 때문에 공통 인프라(예: Chrome의 JavaScript 엔진 V8)의 복사본을 포함하는 경우가 많습니다. (스레드처럼 공유할 수 없기 때문에)

 

즉, 다중 프로세스 아키텍처는 단일 프로세스 아키텍처에 비해 상대적으로 더 많은 메모리 사용하게 됩니다. 메모리를 절약하기 위해 Chrome은 프로세스 수를 제한합니다. 기기의 메모리 및 CPU 성능에 따라 다르지만 Chrome이 한도에 도달하면 한 프로세스에서 동일한 사이트의 여러 탭을 실행합니다.

 

더 많은 메모리 절약 - Chrome의 서비스

Chrome이 리소스가 풍부한 하드웨어에서 실행될 때 각 서비스를 다른 프로세스로 분할하여 안정성을 높일 수 있습니다.

반면, 리소스가 제한된 기기에서는 Chrome은 서비스를 하나의 프로세스로 통합하여 메모리 공간을 절약합니다.

 

프레임별 렌더러 프로세스 - 사이트 격리

사이트 격리(Site Isolation)는 iframe에 대해 별도의 Renderer Process를 실행합니다.

 

동일한 Renderer Process에서 a.com 내부에 iframe으로 b.com, c.com을 실행시킬 수 있지만, 한 사이트가 동의 없이 다른 사이트의 데이터에 액세스할 수도 있습니다.

 

웹의 핵심 보안 모델인 동일 출처 정책(Same Origin Policy)을 지키기 위해, 프로세스를 격리 시켜(별도의 Renderer Process로 실행) 사이트를 분리하는 것이 가장 효과적인 방법입니다. (멜트다운과 스펙터로, 프로세스를 사용하여 사이트를 분리해야 한다는 것이 더욱 분명해졌습니다)

각 iframe은 별도의 Renderer Process로 실행됨

 

다음 글

2022.08.20 - [Frontend] - Chrome 웹 브라우저 내부 아키텍처 및 동작 살펴보기 (2부)

Chrome 웹 브라우저 내부 아키텍처 및 동작 살펴보기 (2부)

 

 

Reference

https://developer.chrome.com/blog/inside-browser-part1/

Inside look at modern web browser (part 1) - Chrome Developers