본문 바로가기
CS/브라우저

브라우저 아키텍쳐 이해하기_프로세스 스레드

by cariño 2023. 5. 26.
728x90
반응형
GOAL

- 프로세스 안에 스레드란?
- 스레드와 하드웨어와의 연관성?
- 멀티 프로세스 내부의 구조?

 

멀티 프로세스를 이해하기 위해서는 하드웨어와 소프트웨어의 연관성에 대해서 알아야 할 필요성이 있다.

프로세스도 추상적인 개념이다. 

 

[브라우저에서 화면이 그려지는 큰 과정]

1. 브러우저에 URL을 입력했을 때, 브라우저가 화면을 그리기 위해서 파일을 가져옴

2. 렌더링 프로세스: 가져온 파일을 브라우저가 렌더링 하는 과정

 

먼저 브라우저가 화면을 그리기 위해서 어떠한 일들이 일어나는지에 대해서 간단하게 살펴보려고 한다. 

브라우저가 실행이 됐을 때 데이터는 메모리에 보관이 된다. 그런데 하드웨어인 메모리와 브라우저에는 어떤 연관이 있을까? 라는 질문이 꼬리를 물고 물어 드디어 CS 공부의 필요성이나 브라우저에 대한 깊이 등을 제대로 공부해야함을 뉘우치게 되었다.

브라우저를 실행하는 기본 운영체제는 OS이다. 

 

 

 

[HardWare]

  • CPU(Centeal Processing Unit): 프로세스를 중앙에서 처리하는 장치 
    • core: 각종 연산을 수행하는 핵심 요소, thread단위로 core 단위에 맵핑시킨다. 
    •  cache memory, controler
  • Memory(ROM, RAM) 주기억장치: 0,1을 기반으로 필요한 데이터를 저장한다.
  • ALU 연산장치
  • Contorl Unit
  • GPU(Graphics Processing Unit):  그래픽 처리용으로 만들어진 프로세스 유닛으로 CPU메모리에 비해 상대적으로 작은 메모리가 여러개로 구성되어 있다. 작은 픽셀 단위로 반복해서 작업에 병렬적으로 처리할 수 있게 만들어진 프로세스이다. 

 

[Software]

  • OS: 이렇게 CPU와 GPU를 기반으로 하드웨어를 제어하고 돌아가는 응용 프로그램을 실행하는 가장 기본 프로그램이 운영체제(Operation System) 이다. (브라우저도 응용프로그램에 한 종류이다. )
    • 프로그램이 실행되면 하나의 프로세스가 생성되고 Code, Data, Stack, Heap을 갖고 있다. 
  • Program: 실행가능한 파일(코드)이 하드웨어를 통해서 프로그램이 실행된다.
    • statement: 실행 가능한 독립적인 코드 조각
  • Process: OS에 의해서 메모리 영역을 할당받고 실행중인 그 상태를 말한다. 
    • 브라우저라는 응용프로그램이 실행되었을 때 메모리(하드웨어)의 일정부분에 할당을 받게 된다. 이 실행 된 상태를 프로세스라고 한다.

 

OS

  • Code: PC(다음번에 실행될 명령어의 주소를 갖고있는 레지스터) 주소란 명령어들이 저장된 메모리의 값 
  • 해당 명령어 주소를 찾아서 명령어를 실행한다. 
  • Data: 전체적인 변수
  •  Heap: 메모리를 관리하는 영역이다. 데이터구조의 한 형태인데 동적으로 메모리를 할당하기도 한다. 
  • Stack: 할당된 자원을 이용하는 실행의 단위를 말한다. 

ex) 함수의 실행을 자료구조인 스택으로 실행된다.

 

 

* 프로세스는 운영체에서 할당하는 작업단위로 프로세스간은 메모리 등의 자원을 공유하지 않는다.

자신만의 영역을 갖고있기 때문에 해당 프로세스가 비정상적으로 작동되더라고 다른 프로세스에 영향을 미치지 않는다. 

 

*스레드는 프로세스 내에서 실행되는 여러 흐름의 단위를  말한다.  하나의 프로세스는 여러개의 스레드를 가질 수 있다. 스레드끼리는 부모 프로세스의 자원을 공유할 수 있기에 다른 스레드에게도 영향을 미칠 수 있다. 

 

* 스택은 Thread라는 메모리를 갖고 있다.  

스택은 스레드를 구현해놓은 구현체를 말한다.  프로세스 안의 코드가 한줄 씩 실행되고 처리되는 흐름을 스레드라 비유할 수 있다. (명령어를 처리하고 실행하는 프로세스 안에 있는  방향을 가지고 있는 흐름)

ex) JS의 경우 콜 스택에 함수가 쌓이게 된다. 함수 안에서 또 함수를 호출하면 스택의 위에 쌓이게 된다. 

 

 


 

멀티 프로세스란?

프로세스(OS에 의해 프로그램이 메모리영역을 할당받고 실행중인 것) 와 실행의 흐름인 스레드와 밀접한 연관성이 있다. 

하나의 응용프로그램을 여러 개의 프로세스로 구성해서 각 프로세스가 하나의 작업(task)를 처리하도록 하는 것

두개 이상의 프로세스가 동시에 OS에서 실행되서 존재하는 것

 

더 쉽게 얘기하자면 하나의 프로그램이 실행되서 프로세스가 생성되고 또 다른 프로그램이 실행되며 프로세스가 생성된다. OS가 프로세스 마다  메모리가 각각 다른 영역을 할당하고 있기 때문에 각각 다른 프로세스는 서로의 메모리에 접근할 수 가 없다. 이 각각의 프로세스를 공유할 수 있도록 IPC를 사용한다.

 IPC로 서로 다른 영역의 메모리에 저장되어 있는 데이터를 공유할 수 있다.   

 

-  Inter Process Communication : 프로세스 사이의 통신 기법

 

싱글 스레드의 모습을 보면 하나의 스레드를 갖고 있고 멀티 스레드는 여러개의 스레드를 갖고 있다. 

js는 싱글스레드 기반의 비동기를 처리하는 언어이다. 그 때 해당 스레드 프로세스가 single-threaded processes랑 같은 의미다. js는 하나의 실행 흐름을 갖고 있지만 마치 사용자 입장에서는 여러개가 동시에 실행되는 멀티 스레드처럼 느끼게 된다. js가 비동기적으로 작업을 처리하기 때문에 여러개의 작업이 한번에 처리된다고 느끼게 된다. 

(자바스크립트와 노드에서는 논블로킹이 중요한 이유는 바로 싱글 스레드이기 때문)

 

그렇다면 하드웨어와 어떤 연관이 있는가?

CPU는 각종 복잡한 연산을 수행하는 하드웨어 이 CPU 구성 요소 중 코어는 핵심요소이다. 쓰레드 하나당 하나의 코어가 맵핑되는 형태로 구성되어 있다. 

 

하나의 쓰레드 = 하나의 코어 맵핑 

 

싱글 코어 프로세스

- 프로세서 (CPU)안에 하나의 코어만 있는 형태

- 하나의 스레드만 처리할 수 있다. 

 

 

헷갈리는 포인트 

프로세서와 코어는 하드웨어를, 프로세스와 스레드는 소프트웨어를 말한다. 

여러개의 코어가 하나의 프로세서에 들어있는 형태는 멀티 코어 프로세서라고 한다. 

 

 

멀티코어 프로세스: 여러개의 스레드를 동시에 처리할 수 있다. 

 

하나의 프로세스 안에서는 스레드가 존재 한다. 한개 존재할 때는 싱글, 여러개일 경우 멀티 프로세스이다.

하나의 스레드는 하드웨어인 코어 하나에 맵핑된다. 

 

 

 

[싱글스레드와 멀티스레드 일때의 프로세스 차이점]

 

JS엔진에서 하나의 콜스택은 

 

싱글 스레드와 멀티 스레드 프로세스의 공통점은 메모리 영역이 하나이다.  프로세스가 하나 생성될 때 메모리 영역은 하나만 생성된다. 하나의 프로세스는 한 메모리 영역이 할당되기 때문에 서로 IPC로 소통을 하게된다. 

(IPC : 각각 저장된 데이터나 요소를 주고 받을 수 있음)

 

멀티 스레드인 프로세스의 장점:

스레드들끼리 하나 메모리를 공유하기 때문에 빠르게 실행에 있어서 스레드 서로간의 필요한 데이터 메모리를 공유할 수 있다.  하지만 싱글스레드가 다른 메모리의 값을 가져오고 싶을 때는 IPC를 이용하기에 멀티스레드인프로세스보다 실행 속도는 느릴 수 바께 없다. 

 

이러한 차이점으로 프로세스를 여러개 띄울 때 메모리 점유가 그만큼 증가하는 단점을 갖고 있다. 대신에 여러개의 프로세스를 띄우면 각각의 메모리를 갖기때문에 보안적인 측면에서 장점을 갖고 있다. 

이러한 차이점을 인지해서 멀티 프로세스 아키텍쳐를 사용할 때는 장,단점을 고려해서 사용해야한다. 

각각 브라우저마다 브라우저 아키텍쳐가 다르기에  브라우저 아키텍쳐의 분리, 프로세스 사용이 다르다. 크롬은 멀티 프로세스 아키텍쳐를 갖고 있는 특징이 있다. 

 

 

 

728x90

'CS > 브라우저' 카테고리의 다른 글

크롬 브라우저 아키텍쳐  (0) 2023.05.28
브라우저 렌더링 과정_(2)  (1) 2023.01.02
브라우저 렌더링 과정_(1)  (1) 2023.01.02
브라우저 저장소  (1) 2022.12.25
브라우저 렌더링 SSR, CSR  (1) 2022.10.31

댓글