* 이 글은 Inside look at modern web browser을 참고해 정리한 글입니다.
Inside look at modern web browser (part 1) - Chrome for Developers
Learn how browser turn your code into functional website from high-level architecture to the specifics of the rendering pipeline.
developer.chrome.com
한 때 면접준비를 할 때 항상 받았던 질문들이 기억이 나곤한다. 그 때 당시에는 달달 외워 급하게 시험을 치르듯 겉만 핧기 형식으로 공부를 했어서 면접관이 꼬리를 한 번 물면 그냥 물릴 수 밖에 없었던... 그런 슬픈 기억들이 떠오른다. 여러 질문 중 가장 기억에 나는 질문은 "Naver 주소를 도메인 창에 치고 들어갔을 때 내부에서는 어떤 동작들이 이루어지나요?"이다. 지금 생각해봐도 내가 어떻게 답변을 했는지 기억이 가물가물 하지만, 한가지 확실한 건 이후 질문에 대해 답변을 이어가지 못했던 것이다.
벼락치기로 외운 공식은 벼락 과도 같이 머릿속에서 잠깐 번쩍이고 사라져버리는 듯 하다. 그래서 이번 글은 조금 더 심도있게 암기가 아닌 이해를 바탕으로 공부해보려 작성한다. 내 미래에 조금은 도움이 되었으면 하는 바램과 함께 Chrome의 내부 동작이라는 주제를 가지고 시작해보려 한다.
chrome 브라우저를 설명한 글은 총 4부작으로 이루어져 있다. 해당 4부작은 다음과 같다.
1. 핵심 컴퓨팅 용어와 크롬의 다중 프로세스 아키텍처
2. 웹 사이트를 표시하기 위해 각 Process와 Thread가 통신하는 방법
3. renderer process 내부에서 발생하는 일
4. Chrome의 내부 동작
총 4부작을 번역하는 글이 아닌 정리(내가 생각하기에 중요 or 중요하지 않은 것을 거르기)한 글이라 자세한 정보를 알고 싶다면 chrome 홈페이지에 문서를 확인해 보면 된다.
1. 핵심 컴퓨팅 용어
1.1 CPU
사람이 움직이고 생각을 하기 위해서는 지시와 통솔이 필요하다. 사람의 뇌는 해당 역할을 하는 필수적이고 중요한 장기 중에 하나이다. 컴퓨터도 마찬가지이다. 브라우저는 컴퓨터에서 사용하는 하나의 도구일 뿐이다. 이러한 도구를 사용하기 위해서는 지시와 통솔이 필요한데 이를 CPU(Central Processing Unit)가 담당한다.
위 사진은 CPU가 하는 일을 비유적으로 표현한 것이다. 네모지게 생긴 CPU는 다양한 작업을 하나씩 처리할 수 있다. 총 4개의 CPU(컴퓨터의 두뇌)가 있기 때문에 핵심을 맡고 있다해서 4 코어라 불린다. 과거에는 단일 코어였지만, 요즘에는 멀티 코어로 함께 일을 처리하기 때문에 빠른 일 처리를 기대할 수 있다.
CPU에 대한 글이 아니기 때문에 간단하게 설명한다.
1.2 GPU
CPU는 다양한 작업을 하나씩 처리 할 수 있다고 하였다. CPU는 어려운 문제를 풀고, 머리를 써서 해결해야 하기 때문에 하나의 집중을 해야 하는 반면 GPU(Graphics Processing Unit)는 단순하고 반복적인, 간단한 일들을 처리하기 때문에 동시에 여러일들을 처리할 수 있다.
GPU의 코어가 많으면 많을 수록 빠른 렌더링과 사용자와의 상호 작용이 더욱 원할 할 수 있다는 장점이 있다.
결론적으로 CPU와 GPU가 컴퓨터에 애플리케이션을
실행하는 프로그램을 조작 및 구동시키고 실행시킨다.
1.3 PROCESS & THREAD
CPU와 GPU가 컴퓨터에 애플리케이션의 실행 프로그램을 조작 및 구동시킨다라고 했다. 그렇다면 애플리케이션을 실행하는 프로그램은 무엇일까? 누군가는 프로그램이요, 누군가는 시스템이라고 할 수 있다. 정확하게는 컴퓨터 공학적 관점으로는 Process 라 일컫는다.
그렇다면 Thread는 무엇일까? Process 내부에 존재하며 프로그램의 일부를 실행하는 것으로 간단하게 설명할 수 있다.
말보다는 그림을 보면 더 쉽게 이해할 수 있다.
애플리케이션을 실행하면 프로세스가 생성되고, 운영체제(OS)는 프로세스가 작업할 메모리를 할당시켜 준다. 만약 애플리케이션을 닫으면 프로세스가 사라지면서 메모리를 확보할 수 있다.
서로 다른 메모리에 할당되기 때문에 프로세스 간의 정보 교환은 어려운데, 이를 도와주도록 설계된 방식(IPC)은 이후 설명에 계속 등장하기 때문에 꼭 기억하자.
2. Chrome의 다중 프로세스 아키텍처
2.1. Chrome의 다중 프로세스
위 그림을 보면 여러 Process가 존재하고 내부에는 여러 Thread가 있다. 또한 Renderer와 Plugin Process는 하나가 아닌 여러개인 것을 볼 수 있다. 각 Process들은 서로가 연결되어 있고, 연결된 선을 통해 통신(IPC)을 하고 있다는 것을 유추해 볼 수 있다. 그렇다면 각각의 Process는 어떤 역할들을 가지고 있을까? 간단하게 알아보고 넘어가자.
(Process는 생략할께요...)
(Utillity, Extension 등 더 많은 Process들이 존재하지만, 뒤에서 나오니 여기서는 생략하고 넘어갈께요..)
- Browser: 주소 표시줄, 북마크, 뒤로 및 앞으로 버튼을 포함한 전반적인 Chrome 애플리케이션을 제어한다.
- Renderer: 웹사이트가 표시되는 탭 내부의 모든 항목을 제어한다.
- Plugin: 웹사이트에서 사용되는 모든 플러그인을 제어한다.
- GPU: GPU 작업을 처리 및 제어한다. (GPU는 여러 앱에 요청을 받고, 같은 화면에 다른 탭을 그리는 역할을 한다.)
본래 Renderer Process는 각 탭에만 할당이 되었는데, 최근에는 Iframe에 대해 별도의 Process를 제공한다. 이를 Site Isolation이라 하는데, 이는 보안을 강화하기 위한 방법 중 하나이다.
만약 a.com과 b.com을 가진 2개의 Iframe이 존재했을 때 괜찮아 보일 수 있지만, 이는 동일 출처 정책(Same Origin Policy)을 벗어나게 됩니다. Site Isolation은 이를 해결할 수 있는 좋은 방법 중 하나이다.
2.2. Chrome의 다중 프로세스 장점
그렇다면 왜 Chrome은 여러개의 Process를 실행시킬까? 총 3가지가 존재한다.
Q1. Chrome의 다중 탭이 전부 먹통이 된다면?
A. Chrome의 한개의 탭이 응답하지 않았을 경우 보통 User는 다른 탭을 사용할 것입니다. 하지만 모든 탭이 한개에 Process에서 실행된다면 하나의 탭이 응답하지 않는 경우 모든 탭이 먹통이 되버리는 초유의 사태가 발생할 것입니다.
Q2. 보안적인 측면
A. 외부로부터 들어온 프로그램이 보호된 영역에서 동작해 시스템이 이상하게 동작하는 것을 막는 보안을 샌드박스라고 한다. 운영 체제는 각 Process의 권한을 제한하는 방법을 제공하는데, 이때 Chrome 브라우저는 각 특정 역할이 있는 Process를 샌드박싱(제어 및 제한) 할 수 있다. 예를 들어 Renderer Process의 역할은 웹사이트가 표시되는 탭 내부의 모든 항목을 제어하는 것인데, 파일 접근 권한을 제어하는 는 행동을 제한시킴으로써 제한된 범위 내에서 역할을 수행할 수 있으므로 보안 강화를 할 수 있다.
2.3. Chrome의 다중 프로세스 최적화
잘 생각해 보면, 누군가는 이렇게 질문할 수 있다.
"탭이 열릴때 Iframe을 생성할 때마다 Renderer Process가 생겨난다면, 과연 좋은 구조라고 생각할 수 있을까? 오히려 더 많은 메모리를 할당하여 성능을 하향화 시키는 것이 아닐까?"
이에 대한 답으로 Chorme은 Process의 최대 개수를 제한하고, 최대 수에 도달하게 되면 하나의 Process에서 여러 탭을 실행하는 방법을 사용하고 있다.
예시를 들어보자.
Chrome에서 구동되는 Process는 각 메모리에 할당이 되기 때문에 개인 메모리 영역을 가지고 있다. 이때 공통적인 작업을 하기 위해서는 Chrome의 엔진인 V8을 복사해야 하는데, 즉 탭이 생성될 때마다 V8엔진을 복사한다는 것이다. 여러 개의 탭이 열리면 당연히 더 많은 메모리를 잡아먹게 될 것이고, 이는 커다란 문제를 야기하게 된다.
그렇기에 Chrome은 여러 Process들을 쉽게 분할하고 하나로 통합할 수 있는 아키텍처를 가지고 있다. 좋은 하드웨어를 가진 컴퓨터에서 실행될 때에는 각 Process를 분할하여 더 많은 안정성을 제공하고, 그렇지 않은 경우에는 Process를 통합하여 메모리 공간을 절약한다.
3. 결론
Chrome 브라우저의 내부 동작을 알기 위해 가장 기본적인 것들을 살펴보았다. 핵심 컴퓨터 용어들을 간단하게 짚어보고, 브라우저에 할당되는 다양한 Process의 역할들을 알아보았다. 또한 Chrome 브라우저가 다중 Process로 구동하는 이유에 대해서도 탐구 해보았다.
다음 Chrome의 내부 동작 #2에서는 웹 사이트를 표시하기 위해 각 Process와 Thread가 통신하는 방법에 대해 살펴보겠다.
< 참고자료 >
[사이트] # Inside look at modern web browser (part 1)
Inside look at modern web browser (part 1) - Chrome for Developers
Learn how browser turn your code into functional website from high-level architecture to the specifics of the rendering pipeline.
developer.chrome.com
<기타> Chrome의 내부 동작 #1 end
'기타' 카테고리의 다른 글
| 어제보다 더 나은 오늘을 살고 있어요? (2) | 2023.12.31 |
|---|---|
| Chrome의 내부 동작 #2 (0) | 2023.12.14 |
| 모든 네트워크 활동을 제어하기 with 우선순위 (1) | 2023.10.21 |
| SPA vs SSG vs SSR (0) | 2023.05.21 |
| Polyfill (0) | 2020.01.21 |
