들어가기 전에
브라우저를 공부하다 여러 개의 글을 읽었는데, 글들이 작성된 시점도, 작성자도 모두 달랐지만 절묘하게 연결되는 부분들이 있었다. 이러한 링크들을 바탕으로 브라우저에 대해 공부한 것을 정리해 본다. 참고로 이 글에서 브라우저는 Chrome 을 의미한다.
브라우저는 다중 프로세스
브라우저는 다중 프로세스로 이루어져있다. 즉, 여러 개의 프로세스가 존재하고 각 프로세스는 종류에 따라 여러 개의 스레드가 존재한다. 대표적으로 브라우저 프로세스와 렌더러 프로세스가 존재한다.
| 프로세스 종류 | 역할 |
|---|---|
| 브라우저 프로세스 | 주소 표시줄, 북마크 막대, 뒤로 가기 버튼, 앞으로 가기 버튼 등 애플리케이션의 “chrome” 부분을 제어한다. 네트워크 요청이나 파일 접근과 같이 눈에 보이지는 않지만 권한이 필요한 부분도 처리한다. |
| 렌더러 프로세스 | 탭 안에서 웹 사이트가 표시되는 부분의 모든 것을 제어한다. |
우선, 브라우저 프로세스는 브라우저를 컨트롤하기 위한 프로세스다. 쉽게 생각하면 크롬의 윗 부분에 위치해 있는 주소창, 북마크, 앞으로 가기, 뒤로 가기 버튼 등의 기능들을 담당하고 있다. 브라우저 프로세스 안에는 여러 개의 스레드들이 존재하는데 대표적으로 UI 스레드와 네트워크 스레드가 있다.
UI 스레드 가 하는 대표적인 일은 사용자의 입력을 처리하는 일이다. 예를 들어, 사용자가 브라우저의 주소창에 어떤 문자열을 입력했을 때 이 문자열이 주소인지 아니면 웹사이트 내 검색을 위한 키워드인지를 구분하여 결과에 따라 다른 스레드 또는 프로세스에 메시지를 전달한다.
네트워크 스레드는 이름에서 예상할 수 있듯, 네트워크 요청, 응답 수신 등 네트워크 관련 일들을 담당한다. 위의 예시에 이어서 사용자가 브라우저의 주소창에 웹사이트 주소를 입력하면, UI 스레드 가 “이거 주소인데 여기로 이동하자!” 라고 네트워크 스레드에게 요청한다. 그러면 DNS Lookup 을 통해 입력한 주소를 IP 주소로 변환하거나, 서버로 부터 HTML 파일을 수신할 수도 있다.
브라우저 프로세스는 이 정도로 정리하고, Renderer 프로세스에 대해 넘어가자. Renderer 프로세스는 HTML을 파싱하고, 레이아웃을 구성하고, 자바스크립트를 실행시키고 등 웹사이트를 그리고 작동시키는 핵심적인 역할을 한다. Renderer 프로세스는 브라우저의 각 탭마다 생성된다. 참고로, 웹사이트 내 iframe 이 존재할 경우도 iframe 마다 별개의 Renderer 프로세스로 생성된다고 한다.
실제 Activity Monitor 에서 Google Chrome(Renderer) 프로세스가 켜놓은 탭마다 실행 중인 것을 볼 수 있다.
Q. 왜 Renderer 프로세스는 여러 개일까?
프로세스는 각 프로세스마다 전용 메모리 공간을 부여 받아 독립적으로 실행된다. 만약, 여러 개의 탭들이 하나의 프로세스 에서 관리된다면, 한 개의 탭에서 문제가 발생했을 때 다른 탭들도 영향을 받아 뻗어버릴 수 있다. 따라서 탭마다 별도의 프로세스로 관리한다면, 하나의 탭에서 문제가 발생해도 다른 탭에 영향을 주지 않기 때문에 피해를 최소화할 수 있다. 하지만, 프로세스가 늘어날 수록 차지하는 메모리 공간 또한 함께 늘어난다. 메모리 공간은 한정적일 수 밖이 없기 때문에, 무한정으로 하나의 탭에 하나의 프로세스를 할당하는 것은 아니고, 상황에 따라서는 메모리 절약을 위해 여러 개의 탭을 하나의 프로세스에서 처리하기도 한다.
Q. 왜 브라우저는 멀티 프로세스일까?
이에 대한 이유는 위와 유사한데, 프로세스는 전용 메모리 공간을 부여 받는다. 따라서 만약 Renderer 프로세스에서 문제가 발생해도, 브라우저 프로세스에는 영향을 주지 않기 때문에 브라우저 전체가 뻗는 상황을 예방할 수 있다. 그리고 추가로 한가지 장점은 보안이다. 프로세스는 운영체제가 권한을 제한할 수 있다. 이를 통해 Renderer 프로세스가 운영체제 내 중요한 리소스를 접근할 수 없도록 제한할 수 있다.