저작권
이 글의 원문은 다음과 같은 저작권 기준을 따릅니다.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
이 글은 'Inside look at modern web browser' 를 번역한 Naver D2 글을 일고 정리한 글이다.
프론트엔드 개발을 준비하고 있는 개발자 입장에서 웹 앱은 브라우저라는 프로그램 위에서 동작하는 어플리케이션이다.
근데 브라우저의 동작에 대해서 자세하게 모르고 있으면 안되겠다는 생각에 브라우저의 동작 원리에 대해서 자세하게 정리해보려고 한다.
먼저 시작하기 전에 이 글을 읽기 위해 간단한 CS지식을 정리하려고 한다.
이번 글은 CPU와 GPU 프로세스, 스레드 그리고 Chrome 브라우저는 어떤 구조로 되어있는지와 다중 프로세스의 장단점에서 다루도록 하겠다.
CPU란?
처음에으로 볼꺼는 CPU이다 중앙처리장치라고도 부르고 컴퓨터의 두뇌라고도 불리고 있다.
CPU는 여러 종류의 작업들을 순서대로 처리하는 기능을 한다.
위에 그림에서 작업대 하나당 하나의 CPU 코어라고 보면 된다. 요즘에는 하나의 CPU안에 여러개의 코어를 두어서 성능을 높이는 방법을 사용하고 있다.
GPU란?
흔히 그래픽카드라고 불리는 하드웨어 장치이다.
평소에 게임을 하려면 그래픽카드를 좋은걸 써야한다는 얘기나 비트코인 재굴을 위해서 GPU를 사용한다라는 얘기는 많이 들어봤을꺼라고 생각한다.
즉 특정작업을 CPU에서 처리하기에는 너무 많기 때문에 그래픽작업이나 사운드와 관련된 작업을 병렬적으로 할 수 있는 장치라고 보면 좋다.
그래서 컴퓨터의 아키텍쳐는 이런 하드웨어 장치가 있고 이를 관리하는 윈도우같은 OS가 있고 OS위에서 우리가 필요한 어플리케이션을 동작하도록 하는 구조로 되어져 있다.
프로세스와 스레드란?
또 하나의 개념을 익혀보자.
우리가 사용하는 웹 브라우저나 한글, 피피티등의 프로그램등이 실행이 된 상태를 프로세스라고 한다. 즉 프로그램은 프로세스라고 볼 수 있다.
그리고 하나의 프로세스 안에서 여러 스레드를 통해서 작업을 하도록 할 수 있다.
어플리케이션을 실행하면 하나의 프로세스가 만들어진다. OS는 프로세스가 작업할 메모리를 떼어준다. 그리고 어플리케이션의 모든 상태가 여기에 저장이 된다.
여기서 동작중인 프로세스가 다른 작업을 위해서 OS에게 추가적인 프로세스를 실행하라고 요청할 수 있다.
이 때 두 프로세스간에 정보를 공유하기 위해서 IPC를 사용한다.
여기선 브라우저의 설명이 우선이니 IPC에 대한 설명은 생략하기로 하겠다.
https://velog.io/@yanghl98/OS%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C-IPC%EB%9E%80
브라우저와 아키텍처
앞에서 기본적인 CS지식을 기반으로 브라우저가 어떤 아키텍처로 이루어져있는지 이해해보자.
브라우저별로 왼쪽 그림처럼 하나의 프로세스에서 여러 스레드를 활용해서 브라우저가 동작할 수도 있고 오른쪽 그림처럼 여러 프로세스를 여러개 만들어서 IPC 통신을 할수도 있다.
표준이 정해진거는 아니기 때문에 구현된 방법은 브라우저별로 다르다.
이 글은 Chrome을 기준으로 설명하겠다.
일단 Chrome 브라우저는 다중 프로세스 아키텍처로 되어있다.
참고로 브라우저에 탭별로 그림에 Renderer 프로세스가 생성이 되었지만 요즘엔 웹 앱의 사이트 단위로 Renderer 프로세스가 할당이 되도록 변경이 되었다.
그럼 왜 Chrome 브라우저는 다중 프로세스 아키텍처로 만들었을까?
다중 프로세스 아키텍처의 이점
예를들어보자 여러개의 탭에 사이트를 띄워놓고 브라우저를 실행시키고 있는데 만일 단일 프로세스라면 하나의 탭이 응답하지 않는다면 브라우저 자체를 껏다가 켜야하는 불편함이 생길 수 있다.
하지만 다중 프로세스라면 하나의 탭이 응답하지 않더라고 해당 탭만 닫으면 다른 탭의 사이트에는 영향을 주지 않기 때문에 훨씬 편리하다고 알 수 있다.
그리고 두 번재 장점은 보안과 격리적인 측면이다.
OS를 통해서 프로세스의 권한을 제어할 수 있어서 특정 프로세스가 특정 기능을 사용할 수 없게 제한할 수 있다고 한다.
하지만 이 장점은 다중 프로세스만 가질 수 있는 장점이라고 볼 수는 없는거 같다.
다중 프로세스 아키텍처의 단점
다중 프로세스 아키텍처도 장점이 있다면 단점이 있는 Trade-off 관계이다.
각 프로세스 별로 독립적인 메모리 공간을 할당해서 사용하는데 이 때 공통적으로 사용하는 메모리 부분을 복사해서 그대로 사용하므로 메모리 사용량이 단일 프로세스보다 많아 진다는 단점이 존재한다.
이 문제를 해결하기 위해서 Chrome은 실행할 수 있는 프로세스의 갯수를 제한하는 방법을 사용한다. 한도는 유저가 사용하고 있는 기기의 메모리 용량과 CPU 성능에 따라서 다르다.
그리고 추가적으로 Chrome은 리소스가 제한적인 장치에서 실행 될때는 여러 프로세스를 일부 합쳐서 하나의 프로세스로 관리해서 메모리 사용량을 절약하고 성능이 좋은 기기에서는 다중 프로세스로 나누어 처리하는 방식으로 동작하도록 한다.
참고
https://developer.chrome.com/blog/inside-browser-part1/
https://d2.naver.com/helloworld/2922312
