웹 브라우저 성능 향상에 대해 고민을 한 적이 있는데 정확하게 웹 브라우저를 알고 성능 향상을 고민해볼 수 있을 거 같아서 모던 웹 브라우저 원문을 읽고 정리한 내용을 작성한 글입니다.
출처 : https://developer.chrome.com/blog/inside-browser-part1/
자세한 내용은 원문을 참고해주세요.
해당 글은 4부까지 이어지는 내용입니다.
1부에서는 핵심 컴퓨팅 용어와 Chrome의 multi-process architecture에 대해 살펴보도록 하겠습니다.
먼저 브라우저가 동작하는 환경을 이해하기 위해서는 CPU와 GPU, 메모리, Process에 대한 이해가 필요합니다.
컴퓨터 핵심 CPU와 GPU
CPU : Centeral Processing Unit
CPU 즉, 중앙 처리 장치는 컴퓨터의 뇌라고 불리며 CPU 코어는 다양한 작업을 하나씩 처리할 수 있습니다.
과거에는 대부분 CPU가 하나의 칩이었지만 최근에는 높은 성능을 발휘하는 멀티코어를 흔히 볼 수 있습니다.
CPU의 핵심 기능은 데이터를 가져오기, 디코딩, 실행 이렇게 세 단계로 진행됩니다.
자세한 내용은 아래의 글에서 확인해주세요.
https://ko.wikipedia.org/wiki/%EC%A4%91%EC%95%99_%EC%B2%98%EB%A6%AC_%EC%9E%A5%EC%B9%98
GPU : Graphics Processing Unit
GPU는 CPU와 달리 간단한 작업을 수많은 코어에서 동시에 처리하는데 특화되어 있습니다. 원래는 그래픽을 처리하기 위해 개발되었으나, 최근에는 GPU 가속 연산으로 GPU 혼자서 더 많은 종류의 연산을 처리하도록 발전하고 있습니다.
Process와 Thread에서 프로그램 실행
브라우저 아키텍처에 대해 공부하기 위해서 또 알아야 할 개념은 Process와 Thread 입니다.
Procss 는 어플리케이션의 실행 프로그램이라 묘사되고, Thread는 Process 내부에 존재하면서 Process의 프로그램의 모든 부분을 실행합니다.
처음 어플리케이션을 실행하게되면, 프로세스가 만들어지게 됩니다. 프로그램은 쓰레드들을 만들어 프로세스가 동작하는걸 돕게하지만 이는 선택사항입니다.
운영체제는 프로세스에게 작동을 위한 메모리 "slab"을 제공하고 모든 어플리케이션의 상태는 해당 개인 메모리 공간에서 유지되게 됩니다.
slab은 효율적인 메모리 할당을 위해 고안된 메모리 관리 메커니즘이고, 기기에서 cache에 할당된 하나의 메모리 할당량을 의미한다.
프로세스는 운영체제에 다른 프로세스가 다른 작업을 실행하도록 요청할수도 있습니다.
그렇게되면 메모리의 다른 부분이 새로운 프로세스에 할당됩니다.
두 프로세스가 통신해야하는 경우엔 IPC ( Inter Process Communication ) 를 사용하여 통신할 수 있습니다.
브라우저 아키텍처
어플리케이션은 브라우저단에서 실행이될 것이고, 그 기반은 process와 thread를 통해서 가능할 것으로 예상이 됩니다.
즉, 웹 브라우저는 한 프로세스가 스레드를 많이 들고 있거나 적은 수의 스레드를 가진 다수의 프로세스들이 IPC를 통해 통신하는 방식으로 동작할 것입니다.
다양한 아키텍처가 있겠지만 저희는 크롬의 최근 아키텍처를 기반으로 브라우저 아키텍처를 공부할 것입니다.
브라우저 프로세스
최상위 프로세스로, 다른 프로세스들을 조율합니다. 주소 창 및 이동 버튼을 포함한 어플리케이션의 크롬 부분을 제어하고, 네트워크 요청 및 파일 엑세스와 같은 브라우저의 권한이 부여된 보이지 않는 부분을 제어합니다.
랜더러 프로세스
웹사이트가 보여질 때 탭 안의 모든 것을 담당합니다. 다수의 프로세스가 생성되어 각 탭마다 할당되는데,
최근까지 크롬은 각 탭마다 별도의 프로세스를 할당하였지만 현재는 iframe을 포함하여 각 사이트별로 프로세스를 가지도록 변경되었습니다.
iframe 으로 다른 사이트의 데이터를 보여줘야할 땐 이를 위한 또 다른 renderer 를 따로 만드는 것입니다.
플로그인 프로세스
웹사이트에서 사용되는 모든 플러그인들을 컨트롤합니다. 예) flash, 광고차단 플러그인...
GPU 프로세스
다른 프로세스와 분리되어 GPU작업을 처리합니다.
왜냐하면 GPU는 여러 앱의 요청을 처리하면서 같은 화면에 그것들을 그려야하기 때문입니다.
멀티 프로세스 아키텍처의 장점
크롬은 여러 개의 랜더러 프로세스를 사용합니다. 즉, 각 탭별로 별개의 랜더러 프로세스로 돌아가게되며
만약 한 탭이 무응답 상태가 되더라도 해당 탭만 닫아버리면 됩니다.
또 다른 이점은 보안 및 샌드박싱(특정 프로세스가 특정기능을 수행할 수 없도록 제한하는 것)입니다. OS는 프로세스의 권한을 제한하는 방법을 제공하므로 브라우저는 특정 기능에서 특정 프로세스를 샌드박스할 수 있습니다. (ex. 렌더러 프로세스와 같은 사용자 입력을 처리하는 프로세스에 대한 파일 엑세스 제한)
프로세스는 저마다 고유한 개인 메모리 공간이 있기 때문에, 공통된 인프라의 복사본을 포함하는 경우가 있습니다. 이 말은 같은 프로세스 내에 존재하는 스레드였다면 공유했을텐데 그렇지 않기 때문에 더 많은 메모리를 사용해야한다는 말이기도 합니다.
그래서 메모리 절약을 위해 Chrome은 돌릴 수 있는 프로세스의 수를 제한합니다.
크롬은 현재 고성능 장치에서는 안정성을 위해 각 서비스를 별개의 프로세스로 분리하고, 저성능 장치에서는 서비스를 하나의 프로세스로 합쳐 메모리 점유를 낮추는 방식으로 변경하기 쉽게 구조를 변경중에 있습니다.
