브라우저에 URL을 입력했을 때 - 1

gyomni·2022년 9월 2일
3

Week I Learned

목록 보기
17/20
post-thumbnail

브라우저에 URL을 입력하면 어떤 과정으로 원하는 화면이 그려지게 되는 걸까?

두 과정으로 나눠볼 수 있다!

  1. 브라우저가 화면을 그리기 위해 파일을 가져오는 단계
  2. 가져온 파일들( HTML, CSS, Javascript, 외부 리소스...)을 브라우저가 렌더링하는 단계

이 과정들을 자세하게 살펴보자 !!✨


1. 브라우저가 화면을 그리기 위해 파일을 가져오는 단계

브라우저가 화면을 그리기 위해 파일을 가져오는 과정을 OS, hardware와 함께 알아볼 것이다.

Hardware의 구성 요소

  • CPU(Central Processing Unit)
    : 프로세스를 중앙에서 처리하는 장치로,
    커다란 작업, 다양한 작업(연산작업)과 같은 프로세스들을 처리하는 장치이다.
    GPU보다는 좀 더 복잡한 작업을 처리하는 프로세싱 유닛이다.
    대표적인 구성요소로는 core, cache memory, controler가 있다.

    - core는 CPU안에서 각종 연산을 수행하는 핵심요소로 Thread단위로 연산들을 처리하게 된다.
    (Thread단위로 core단위에 맵핑이 됨)

  • Memory(ROM, RAM)
    : 컴퓨터가 메모리안에 데이터들을 기억해 놓을 수 있는 기억 장치이다.
    (컴퓨터의 ON, OFF 기반으로 필요한 데이터를 저장)
    ROM(= Read-Only Memory), RAM(= Random-Access Memory)

  • 연산장치
    : 프로그램상의 산술/논리 연산을 수행하는 장치이다.

  • Control Unit
    : 프로세서의 조작을 지시하는 컴퓨터 중앙 처리 장치의 한 부품으로, 입출력 장치 간 통신 및 조율을 제어한다.

  • GPU(Grapics Processing Unit)
    : GPU는 그래픽 처리용으로 만들어진 processing unit인데,
    여러 개의 단순 작업을 처리하는 unit들이 여러개가 병렬적으로 처리하게끔 프로세싱된 유닛이다.

    그래픽은 작은 Pixel 단위로 단순한 처리를 반복해서 작업해야 한다.
    이런 작업을 수행하기 용이하도록 설계된 것이 GPU이다.
    요즘에는 GPU가 그래픽뿐만 아니라, 단순 작업을 처리하는 데 있어서 다른 곳에도 많이 쓰이고 있다.

hardware의 기본적인 개념들을 정리해 봤다.
이런 hardware들이 있을 때, CPU, GPU 기반으로 위에서 돌아가는 Program이 있다.
그 위에서 돌아가는 기본 프로그램이 OS(운영체제)이다.

Software 요소

로 정리해본다면,

  • Program
    : 실행 가능한 파일(코드)이며, 프로그램에는 여러 종류가 있다.
    대표적으로 기본 프로그램와 응용 프로그램 이렇게 2가지가 있다.

    기본 프로그램은 OS가 되고, OS는 Hardware를 제어할 수 있어서 Hardware에게 명령을 내린다.
    그리고 응용 프로그램을 실행한다.
    해당 게시물에서 깊게 다룰 브라우저도 응용 프로그램의 한 종류이다.

  • OS(운영체제)
    : Hardware를 제어하고 응용 프로그램을 실행하는 기본 프로그램이다.
    OS도 기본 프로그램이므로, 이것은 곧 코드로 작성한 파일인 것이고,
    이 파일을 실행하게 되면 OS가 실행되는 것이다.
    브라우저라는 응용프로그램이 실행되었을 때는 추상적인 형태를 띄게 된다.
    그리고 하드웨어인 메모리에 일정 부분을 할당받게 된다. 즉, 프로그램은 실행이 될 수 있는 것이다.
    이렇게 실행 된 상태를 Process라고 부른다.

  • Process
    : Program이 OS에 의해 memory영역을 할당받고 실행 중인 상태를 말한다.
    program이 실행을 하게 되면 하나의 process가 생기게 되고, process가 차지하고 있는 메모리를 살펴보면 Code, Data, Stack, Heap 이렇게 4가지를 가지게 된다.
    여기서 Stack을 좀 더 유심히 보자!

    - code
    : 작성한 코드, 다음 번 실행될 명령어의 주소를 갖고 있는 레지스터.
    명령어들이 메모리 어딘가에 저장이 되고, 그 어딘가를 표시하는 것이 메모리 주소이다.
    주소를 가지고 명령어를 찾아 실행할 수 있다.

    - Data
    : 전역 변수(global variables), 정적 변수(static variables), 배열(array), 구조체(structure) 등이 저장된다.

    - Heap
    : 메모리를 관리한다.
    data structure의 한 종류로, 메모리가 heap으로 구현이 되어 있다.
    또한 heap을 통해서 동적으로 메모리를 할당하기도 한다.

    - Stack
    : Process가 할당된 자원을 이용하는 실행 단위로, 임시 data를 저장한다. stack은 Thread로 감싸져있다.
    stack과 Thread가 추상적인 개념이라 해당 이미지가 도움이 될 것이다.
    이미지로 설명을 해보자면, Process라는 사각형은 Program이 실행될 때 생겨 난다.
    실행 된다는 것은 코드들이 한 줄씩 해석되고 처리되어 변화를 일으키는 것이고,
    이런 흐름을 Thread라고 부른다.
    점선으로 그려진 Thread는 화살표 방향의 흐름을 가지게 된다.

    흐름을 Thread라고 생각하자!
    명령어를 처리하고 실행하는 흐름!
    process안에 있는 명령어 실행 흐름!

    javasscript의 경우로 볼 때, 명령어가 실행 되려면 하나의 callstack에 function이 쌓이게 된다.
    실행 순서에 의한 실행 흐름이 생기고 이걸 Thread라고 이해하자.

    정리하면,
    Process안에는 Code, Data, Heap, stack이라는 구성요소가 있고, stack은 Thread를 구현해 놓은 구현체가 된다.

  • Multi Process
    : Process가 하나만 있는 것이 아니라, 두개 이상의 Process가 동시에 OS에 의해 실행 되는 상태를 말한다.
    이미지를 보면 두개의 Program이 실행되어 각각 다른 Process가 생성되어 있는 것을 볼 수 있다.

    그런데, memory가 각각 다른 영역을 할당해 주고 있기 때문에 이 두개의 Program 사이에는 소통이 필요하다. 즉, OS가 Process마다 다른 영역의 memory를 할당해주기 때문에 서로의 data나 실행 흐름을 공유하기 위해 Inter Process Communication(IPC)를 활용 하게된다.
    => IPC로 다른 영역의 memory에 저장되어 있는 data들을 공유할 수 있다.

    여기서, Single Thread가 아닌 Multi Thread로 돌아가고 있는 해당 구조에 대해 조금 더 자세히 알아보자.위 이미지에서 두 박스는 각각 process 이다. 현재 이 2개의 process가 software 영역에서 돌아가고 있다고 생각해보자. 왼쪽은 single-threaded process로, process안에 thread가 하나만 있다.
    오른쪽은 multi-threaded process로, process안에 thread가 여러개 있다.

    여기서 single thread는 익숙한 편인데, javascript는 single thread 기반의 비동기로 처리하는 언어라는 것을 들어본 적이 있기 때문이다. 이 때 single thread가 single-threaded process의 single thread와 같은 의미이다. 이 말은 javascript는 하나의 실행 흐름을 가진다는 것이다.

    그런데 사용자 입자에서 보면 마치 여러개가 동시에 실행되고 있는 것 처럼(multi thread처럼)느껴진다. 그 이유는 javascript가 single thread지만 비동기적으로 작업을 처리하기 때문에 여러개의 작업을 동시에 처리하는 것 처럼 느껴지게 된다.

    그렇다면 thread는 hardware와 어떻게 연관이 있을까?

hardware안 CPU의 구성 요소인 core 하나가 thread하나당 맵핑되는 형태로 구성이 되어 있다.

single-core CPU에는 1개의 CPU가 있고, multi-core CPU에는 여러 개의 CPU가 있다.
그래서, single-core processors에서는 1개의 thread를 처리할 수 있지만, multi-core processors에서는 여러개의 thread를 동시에 처리할 수 있게 된다.

process는 single-threaded process일 때와 multi-threaded process일 때 차이가 있다.
그래서 이부분을 조금만 더 알고 넘어가자.(이 이미지에서single-threaded process의 Stack이 javascript 엔진의 callstack이라고 보면 된다!)

single-threaded process와 multi-threaded process는 메모리 영역이 한개라는 공통점이 있다.
process가 하나 생성될 시 메모리 영역을 하나만 생성한다. 위에서 설명했다시피 하나의 process에는 하나의 memory영역이 할당되어서 각각의 process가 서로 소통하려면 IPC를 통해서 해야한다.

multi-threaded process는 thread끼리 memory를 공유하고 있기 때문에 multi-threaded process안의 각각의 thread가 필요한 data들을 빠르게 공유할 수 있다는 장점을 가지고 있다. (하나의 memory를 각각의 thread가 공유하고 있기 때문)
그런데,thread에서 다른 thread (위의 이미지의 경우는 multi-threaded process의 thread에서 single-threaded process의 thread)에 있는 실행 결과 값에 접근하고 싶다면 memory가 다르기 때문에 IPC를 통해 접근할 수 있다.
process를 여러개 띄울 때는 그 만큼 menory 점유율이 증가한다는 단점이 있다. 대신, 여러개 띄우면 각각의 memory를 할당받기 때문에 접근을 제한할 수가 있어서 보안적인 측면에서는 유리하다는 장점도 있다.

이렇게 장단점이 있기 때문에 multi-threaded process를 사용할 때는 장단점을 고려해서 상황에 사용해야 한다.
여기서 이제! 브라우저 얘기를 좀 해보자면 chrome이라는 브라우저 아키텍쳐는 Multi Process Architecture를 가진다.
각각 브라우저 마다 브라우저 아키텍쳐가 다르다.

이로써 Multi Process 라는 개념을 이해하는 시간을 가졌다. 그리고 이 지식은 Chrome 브라우저의 아키텍쳐를 이해하는데 훨씬 수월할 것이다.

해당 CS에 대한 지식이 부족햇는데, 흐름을 가지면서 배워보니 나름 재밌게 습득했다.
아직 본 주제인 브라우저에 URL을 입력하면 어떻게 되는지는 쓰지 못하였으므로
다음 게시물에서 작성하겠다 !!! 👋👋


참고 자료

profile
Front-end developer 👩‍💻✍

0개의 댓글