최신 브라우저의 내부 살펴보기 - (1) CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처

wookhyung·2022년 12월 11일

study 브라우저

브라우저?

사용자가 갖고자 하는 자원을 서버로 요청하고, 응답 받은 자원을 알맞게 표시해주는 소프트웨어
ex) 크롬, 파이어폭스, 사파리 엣지, ~~인터넷 익스플로러(IE)~~, …

💡 브라우저가 실행되는 환경을 이해하려면 몇 가지 컴퓨터 부품과 그 기능을 이해해야 한다.

→ 컴퓨터의 핵심은 CPU와 GPU이다!

CPU(Central Processing Unit, 중앙처리장치)

컴퓨터의 두뇌 라 할 수 있다.
CPU 코어는 여러 종류의 작업 을 하나씩 순서대로 처리할 수 있다.

GPU(Graphics Processing Unit, 그래픽처리장치)

그래픽 작업 을 처리하기 위해 개발되었다.
CPU와 달리 간단한 작업 에 특화되어 있지만, 여러 GPU 코어가 동시에 작업을 수행할 수 있다.
최근 몇 년 동안 GPU 가속을 통해 GPU가 단독으로 처리할 수 있는 계산이 점점 더 많아졌다.

NVIDIA Mythbusters Demo GPU versus CPU 영상

https://www.youtube.com/watch?v=-P28LKWTzrI

프로세스와 스레드

프로세스 → 애플리케이션이 실행하는 프로그램
스레드 → 프로세스 내부에 있으며 프로세스로 실행되는 프로그램의 일부

브라우저는 프로세스와 스레드를 어떻게 사용할까?

브라우저를 만드는 방법에 대한 표준은 없으며, 브라우저마다 접근 방식이 다를 수 있음.

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

가장 위에 있는 브라우저 프로세스는 애플리케이션의 각 부분을 맡고 있는 다른 프로세스를 조정한다.
렌더러 프로세스 는 여러 개가 만들어져 각 탭 마다 할당(process per tab)된다. 최근까지 Chrome은 탭마다 프로세스를 할당했으나, 현재는 사이트 마다 프로세스(process per site, iframe 포함)를 할당한다.

프로세스	프로세스가 제어하는 부분
브라우저 프로세스	주소 표시줄, 북마크 막대, 뒤로 가기 버튼, 앞으로 가기 버튼 등 애플리케이션의 "chrome" 부분(브라우저의 UI 영역)을 제어한다. 네트워크 요청이나 파일 접근과 같이 눈에 보이지는 않지만 권한이 필요한 부분도 처리한다.
렌더러 프로세스	탭 안에서 웹 사이트가 표시되는 부분의 모든 것을 제어한다.
플러그인 프로세스	웹 사이트에서 사용하는 플러그인(예: Flash)을 제어한다.
GPU 프로세스	GPU 작업을 다른 프로세스와 격리해서 처리한다. GPU는 여러 애플리케이션의 요청을 처리하고 같은 화면에 요청받은 내용을 그리기 때문에 GPU 프로세스는 별도 프로세스로 분리되어 있다.

다중 프로세스 아키텍처가 Chrome에 주는 이점은?

각각의 탭이 독립적인 렌더러 프로세스에 의해 실행되므로, 응답하지 않는 탭이 생기면 그 탭만 닫고 실행 중이 다른 탭으로 이동할 수 있다. 만약 모든 탭이 하나의 프로세스에서 실행 중이었다면, 응답하지 않는 탭이 생기면 모든 탭이 응답하지 못하게 된다.

하지만, 동일한 프로세스의 스레드가 메모리를 공유할 수 있는 데 반해 서로 다른 프로세스는 메모리를 공유할 수 없어 메모리 사용량이 더 많아질 수 밖에 없다. Chrome은 메모리를 절약하기 위해 기기의 메모리 용량과 CPU 성능에 따라 실행할 수 있는 프로세스의 개수를 제한한다.

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

다중 프로세스 아키텍처의 안정적이고 빠른 사용자 경험, 보안의 장점을 살리면서 메모리를 절약할 수 없을까?
- 브라우저의 각 부분을 서비스로 실행해서 메모리 사용량을 줄이자!
  - 성능이 좋은 하드웨어 → 여러 프로세스로 분할
  - 리소스가 제한적인 장치 → 하나의 프로세스로 합쳐서 실행

wookhyung

SWE

다음 포스트