0. 들어가기에 앞서서..
이번 주제는 프론트엔드 개발을 위해 처음으로 공부했었던 주제 입니다. 지난 날에 공부하며 정리했던 부분을 참고하며 다시 한번 복습하고자 글을 작성하였습니다.
브라우저 주소 창에 URI를 입력 했을 때 어떤 과정을 거쳐 페이지가 화면에 보여지게 되는지, 브라우저의 동작 원리에 대해 알아보겠습니다.
1. 브라우저
흔히 브라우저는 인터넷망에서 정보를 검색하는 데에 사용하는 응용 프로그램을 말합니다.
웹 브라우저가 웹 서버에 웹 페이지 요청을 하면 웹 서버는 웹 페이지 응답을 하게 됩니다.
서버가 브라우저에게 전달한 응답 HTML 문서를 브라우저는 읽어들이고 해석 한 후 사용자에게 보여줍니다.
브라우저의 종류는 크롬, 사파리, 엣지, 파이어폭스 등이 있으며, 그 중 크롬은 가장 높은 점유율을 차지하고 있습니다.
2. 브라우저의 주요 기능
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이 주요 기능 입니다.
자원은 HTML, PDF, 이미지 혹은 다른 형태로도 가능하며 이 자원의 주소는 URI에 의해 정해집니다.
URI (Uniform Resource Identifier) 는 식별하고
URL (Uniform Resource Locator) 는 위치를 가리킨다.
각 브라우저의 사용자 인터페이스는 아래와 같은 요소들이 일반적 입니다.
- URI 를 입력 할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 문서 로드를 중단 할 수 있는 정지 버튼
- 홈 버튼
3. CPU, GPU, 프로세스& 스레드
브라우저의 기본 구조에 설명하기에 앞서, 몇 가지 컴퓨터 부품과 그 기능을 이해한다면 브라우저가 실행되는 환경을 잘 이해할 수 있을 것 같아 간단하게 짚어보겠습니다.
(1) CPU (Central Processing Unit, 중앙처리장치)
CPU는 컴퓨터의 두뇌 라고도 할 수 있습니다. 즉, 컴퓨터 시스템을 통제하고 프로그램의 연산을 실행하고 처리하는 가장 핵심적인 제어 장치 입니다.
각자 자리에서 작업을 수행하는 4개의 CPU코어를 나타낸 그림입니다. 이 CPU 코어는 일을 하는 사람이라고 생각해주시면 더 이해하기가 수월합니다. (이때, 코어는 CPU의 핵심적인 역할을 맡고 있습니다.)
CPU 코어는 여러 종류의 작업을 하나씩 순서대로 처리 할 수 있습니다.
최신 하드웨어는 보통 하나 이상의 코어를 사용해 스마트폰이나 노트북의 실행 성능을 높이기도 합니다.
(2) GPU (Graphics Processing Unit, 그래픽처리장치)
GPU는 CPU와 달리 간단한 작업에만 특화 되어 있지만 여러 GPU코어가 동시에 작업을 수행하는 병렬 처리 방식을 가지고 있습니다.
렌치만 가지고 있어 제한된 작업만 처리하는 수많은 GPU코어를 나타낸 그림 입니다.
최근 몇 년 동안 GPU 가속을 통해 GPU가 단독으로 처리할 수 있는 계산이 점점 더 많아지고 있습니다.
CPU와 GPU
컴퓨터나 스마트폰에서 어플리케이션을 실행하게 될 때 구동하는 것이 바로 GPU와 GPU 입니다.
일반적으로 어플리케이션은 운영체제에서 제공하는 메커니즘을 통해 GPU와 GPU에서 실행됩니다.
(3) 프로세스 & 쓰레드
프로세스: 어플리케이션이 실행하는 프로그램, 운영체제로부터 자원을 할당 받는 작업의 단위
쓰레드: 프로세스 내부에 있으며 프로세스가 할당 받은 자원을 이용하는 실행 단위
+) 실행 단위: CPU코어에서 실행하는 하나의 단위로 프로세스와 쓰레드를 포괄하는 개념
어플리케이션을 시작하면 하나의 프로세스가 만들어집니다. (이 때, 쓰레드 생성 유무는 선택사항 입니다.)
운영체제는 프로세스가 작업할 메모리를 한 조각 주게되는데, 이 전용 메모리 공간에 어플리케이션의 모든 상태가 저장 됩니다. 만약 어플리케이션을 닫게 된다면 프로세스가 사라지고 운영체제도 메모리를 비우게 됩니다.
프로세스는 독립적인 개체 라는 특성을 가지고 있기 때문에, 두 프로세스가 서로 정보를 공유해야 할 때는 IPC 를 사용합니다.
IPC (Integer-Process Communication) : 내부 프로세스들 끼리 더 효율적으로 정보를 주고 받기 위한 통신의 일종
프로세스는 생성되면서 메모리 공간 등을 복사 하여 자원을 할당하지만 쓰레드는 메모리 공간과 자원들을 공유하기 때문에 프로세스 간의 통신은 쓰레드간의 통신보다 어렵습니다.
많은 어플리케이션이 이러한 방식으로 작동하도록 설계되어 있기 때문에 작업 프로세스가 응답하지 않을 때 어플리케이션의 다른 부분을 실행하는 프로세스를 중지하지 않고도 응답하지 않는 프로세스를 다시 시작 할 수 있습니다.
4. 브라우저 아키텍처
이제 브라우저는 프로세스와 쓰레드를 어떻게 사용하는지 알아보겠습니다.
한 어플리케이션에 대한 작업을 동시에 하기 위해서는 멀티 프로세스와 멀티 쓰레드 방식이 있습니다.
브라우저를 만드는 방법에 대한 표준은 없기 때문에 브라우저마다 접근 방식이 완전히 다를 수 있습니다.
쓰레드를 많이 사용하는 프로세스 하나만 사용 할 수 있는 멀티 쓰레드 방식 입니다.
쓰레드 끼리 긴밀하게 연결 되어 있으며, 공유된 자원으로 메모리가 효율적이고 통신 비용을 절감하는 이점을 지니고 있습니다.
쓰레드를 조금만 사용하는 프로세스를 여러 개 만들어서 IPC로 통신 할 수 있는 멀티 프로세스 방식 입니다.
프로세스는 독립적이기 때문에 IPC를 통해 통신해야 하는데, 이 방식은 자원을 더 소모하고, 메모리를 더 차지하게 됩니다.
멀티 프로세스 방식은 각 탭 마다 독립적인 렌더러 프로세스를 사용하게 되는데, 이 때 한 탭이 응답하지 않으면 그 탭만 닫고 실행중인 다른 탭으로 이동 할 수 있습니다.
또한, 운영체제를 통해 프로세스의 권한을 제한할 수 있어 브라우저는 특정 프로세스가 특정 기능을 사용 할 수 없게 제한 할 수 있는 보안의 이점과 사용자 승인 없이는 웹캠에 접근 할 수 없거나 리소스 접근 제한 되는 샌드박스 기술을 적용할 수 있는 이점을 가지고 있습니다.
시스템 자원을 효율적으로 관리 할 수 있는 멀티 쓰레딩 보다 멀티 프로세스 아키텍쳐를 채택하는 브라우저도 많습니다.
이 아키텍처를 채택 하였을 때 더 많은 메모리를 절약하기 위해 실행할 수 있는 프로세스의 개수를 제한하거나 브라우저의 각 부분을 서비스로 실행해 여러 프로세스로 쉽게 분할하거나 하나의 프로세스로 통합할 수 있도록 서비스화를 진행하는 노력도 하고있습니다.
출처
