브라우저

[브라우저] 다중 프로세스 아키텍처(feat. Chrome)

디벨로펄 2023. 3. 1.

참고 자료 : https://d2.naver.com/helloworld/2922312

◆ CPU : Central Processing Unit : 중앙처리장치

컴퓨터의 두뇌. 똑똑한 일꾼 한명.

여러 종류의 작업을 하나씩 순서대로 처리할 수 있다.

◆ GPU : Graphics Processing Unit : 그래픽처리장치

CPU와 달리 간단한 작업에만 특화되어 있지만, 여러 GPU코어가 동시에 작업을 진행할 수 있다.

※ 하드웨어 가속(hardware accelerated) : CPU가 아닌 다른 특별한 장치를 통해 수행 속도를 높이는 것. 그래픽이나 사운드 관련된 작업에 하드웨어 가속 많이 사용.

브라우저에서는 주로 GPU를 사용한 그래픽 작업 가속을 의미한다.

◆ 프로세스와 스레드로 프로그램 실행

프로세스는 애플리케이션이 실행하는 프로그램이라 할 수 있다. 스레드는 프로세스 내부에 있으며, 프로세스로 실행되는 프로그램의 일부를 실행한다.

IPC : Inter process Communication : 프로세스 간 통신

프로세스는 서로 독립적이며, 서로 IPC를 통해 정보를 공유한다. 한 프로세스에서 다른 프로세스를 실행하라고 운영체제에 요청할 수 있다.

◆ 브라우저 아키텍처 : 프로세스, 스레드 관점

1. 1개의 프로세스에서 여러개의 스레드

2. 여러개의 프로세스(network, browser, ui, gpu, ...)

브라우저 프로세스는 다른 프로세스를 조정한다. 렌더러 프로세스는 여러개가 생성되며 탭마다 할당된다. + 이젠 사이트 마다 할당 된다고 한다.(iframe이 있는 사이트 포함)

* process per tab : 탭마다 프로세스 할당

* process per site : 사이트마다 프로세스 할당.

■ 각 프로세스가 제어하는 부분

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

* 소문자 'chrome' : 브라우저의 UI영역을 의미한다.

현재 실행중인 프로세스 목록과 사용 중인 CPU, 메모리 양 확인

-> 크롬> 크롬 맞춤설정 및 제어 버튼> 도구 더보기> 작업 관리자

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

안정적이고 빠른 사용자 경험과 보안을 제공한다.(but, 메모리를 많이 먹음)

1. 다중 렌더러 프로세스의 장점

- 한 탭이 응답하지 않으면, 그 탭만 닫고, 실행중인 다른 탭으로 이동할 수 있다.

→ 탭이 하나의 렌더러 프로세스에 의해 실행 중이었다면 하나의 탭만 응답하지 않아도 모든 탭이 응답하지 못하게 된다.

2. 보안과 격리

운영체제를 통해 프로세스 권한 제한할 수 있어서, 브라우저는 특정 프로세스가 특정 기능을 사용할 수 없게 제한할 수 있다. ex)크롬에서는 렌더러 프로세스 처럼 임의의 사용자 입력을 처리하는 프로세스는 임의의 파일에 접근하지 못하게 제한된다.

* 임의의 사용자 입력 : 웹 페이지의 실행

크롬은 메모리 절약을 위해 프로세스 개수를 제한한다. - 프로세스 개수가 한도에 이르면 동일한 사이트를 열고 있는 여러 탭을 하나의 프로세스에서 처리한다.

약간 단점 : 메모리를 많이 먹는다.

◆ 메모리 절약을 위한 크롬의 노력 : 서비스화 Servicification

크롬은 브라우저의 각 부분을 서비스로 실행해 여러 프로세스로 쉽게 분할하거나 하나의 프로세스로 통합할 수 있도록 아키텍처를 변경하고 있다.

성능이 좋은 하드웨어에서는 각 서비스를 여러 프로세스로 분할해 안정성을 높이고, 리소스가 제한적일 때는 여러 서비스를 하나의 프로세스에서 실행하여 메모리 사용량을 줄이는 것이 기본 아이디어이다. (이런 아키텍처는 Android같은 플랫폼에서는 이전부터 사용되었다고 한다.)

◆ 사이트 격리 : 프레임(iframe)별로 실행되는 렌더러 프로세스.

site isolation. iframe의 사이트를 별도의 렌더러 프로세스에서 실행하는 것이다.

탭마다 렌더러 프로레스를 할당하는 모델에서는 iframe의 사이트가 같은 렌더러 프로세스에서 동작하기 때문에, 서로 다른 사이트 간 메모리가 공유될 수 있다는 문제가 있다. 프로세스를 격리하면 사이트를 격리할 수 있기 때문에, 동일 출처 보안 정책을 지킬 수 있다.

Chrome 67부터 데스크톱에서 사이트 격리를 기본으로 사용하도록 설정하면서, 탭에서 iframe의 사이트에 별도의 렌더러 프로세스가 적용된다.

* 동일 출처 정책(same- origin policy) : 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식. 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여준다.

참고

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

'브라우저' 카테고리의 다른 글

[브라우저] 네비게이션- 프로세스와 스레드의 동작 (0)	2023.03.01
[브라우저] 배치(Layout), Paint(feat 더티비트) (0)	2023.02.27
[브라우저] CSS 파싱(문맥 자유 문법 O); (0)	2023.02.27
[브라우저] HTML 파서 - 마크업 → 파싱트리(문맥 자유 문법x) (0)	2023.02.26
[브라우저] 파싱이란?(Parsing이란?) - 파싱의 과정(어휘 분석, 구문 분석) (0)	2023.02.26