최신 브라우저의 내부 살펴보기를 읽고

1부 - CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처

• https://d2.naver.com/helloworld/2922312

• 원문 : https://developers.google.com/web/updates/2018/09/inside-browser-part1 (by. Mariko Kosaka)

• 시리즈의 첫번째 글에서는 Chrome 프로세스 모델을 다룹니다

• Chrome이 채택한 다중 프로세스 아키텍처의 장점과 한계를 살펴봅니다

• 다중 프로세스 아키텍처의한계를 극복하기 위한 노력인 '서비스화(servicification)'를 설명합니다

CPU, GPU, 메모리 그리고 다중 프로세스 아키텍처

• 이 시리즈는 Chrome의 내부를 고수준 아키텍처부터 렌더링 파이프라인의 세세한 부분까지 살펴본다
• 브라우저가 어떻게 코드를 작동하는 웹 사이트로 바꾸는지
• 성능을 향상시킨다는 기술이 왜 도움이 되는지 이 시리즈를 통해 알 수 있을 것이다

컴퓨터의 핵심은 CPU와 GPU이다

• 브라우저가 실행되는 환경을 이해하려면 몇 가지 컴퓨터 부품과 그 기능을 이해해야 한다

  CPU

  • CPU = Central Processing Unit = 중앙처리장치
  • 컴퓨터의 두뇌
  • 여러 종류의 작업을 하나씩 순서대로 처리
  • 예전에는 대부분의 CPU가 단일 칩
  • CPU 코어 하나는 동일한 칩에 있는 또 다른 CPU나 마찬가지

  GPU

  • GPU = Graphics Processing Unit = 그래픽처리장치

  • 간단한 작업에 특화 하지만 여러 GPU 코어가 동시에 작업을 수행

  • GPU를 사용한다, GPU의 지원을 받는다 => 빠른 렌더링과 매끄러운 상호작용과 관련있음

  • 최근 GPU 가속을 통해 GPU가 단독으로 처리할 수 있는 계산이 많아 짐

  • 컴퓨터나 스마트폰에서 애플리케이션을 실행할 때 애플리케이션을 구동하는 것이 바로 CPU와 GPU

  • Machine Hardware => Operating System => Application

프로세스와 스레드로 프로그램 실행

• 프로세스 = 애플리케이션이 실행하는 프로그램
• 스레드 = 프로세스 내부에 있음, 프로세스로 실행되는 프로그램의 일부를 실행

1. 애플리케이션 시작 => 프로세스가 하나 만들어짐
2. 프로세스가 작업을 하기 위해 스레드를 생성할 수도 있지만 선택사항
3. 운영체제는 프로세스가 작업할 메모리를 "한 조각" 줌, 이 전용 메모리 공간에 애플리케이션의 모든 상태가 저장
4. 애플리케이션을 닫으면 프로세스가 사라지고 운영체제가 메모리를 비움

• 프로세스는 여러 작업을 수행하기 위해 운영체제에 다른 프로세스를 실행하라고 요청할 수 있음
• 두 프로세스가 서로 정보를 공유해야 할 때는 IPC(inter process communication, 프로세스 간 통신)를 사용
• 그래서 작업 프로세스가 응답하지 않을 때 애플리케이션의 다른 부분을 실행하는 프로세스를 중지하지 않고도 응답하지 않는 프로세스를 다시 시작할 수 있음

브라우저 아키텍처

• 브라우저는 프로세스와 스레드를 어떻게 사용할까?

• 브라우저를 만드는 방법에대한 표준은 없음

• Chrome의 최근 아키텍처를 알아보자

• 브라우저 프로세스는 애플리케이션 각 부분을 맡고 있는 다른 프로세스를 조정

• 렌더러 프로세스는 여러 개가 만들어져 각 탭마다 할당

• 이제는 사이트마다 프로세스를 할당 (iframe에 있는 사이트 포함)

  어떤 프로세스가 무엇을 담당하나

  1. 브라우저 프로세스 => 주소 표시줄, 북마크 막대, 뒤로가기 버튼, 앞으로 가기 버튼등 애플리케이션의 브라우저 UI 부분을 제어
     네트워크 요청이나 파일 접근과 같이 눈에 보이지는 않지만 권한이 필요한 부분도 처리
  2. 렌더러 프로세스 => 탭 안에서 웹 사이트가 표시되는 부분의 모든 것을 제어
  3. 플러그인 프로세스 => 웹 사이트에서 사용하는 플러그인을 제어
  4. GPU 프로세스 => GPU 작업을 다른 프로세스와 격리해서 처리
     GPU는 여러 애플리케이션의 요청을 처리하고 같은 화면에 요청받은 내용을 그리기 때문에 GPU 프로세스는 별도 프로세스로 분리되어 있음
  • 이 외에도 확장 프로그램 프로세스, 유틸리티 프로세스 등 많은 프로세스가 있음

  다중 프로세스 아키텍처가 Chrome에 주는 이점

  • Chrome은 렌더러 프로세스를 여러 개 사용한다

  • 가장 간단한 예로 탭마다 렌더러 프로세스를 하나 사용하는 경우를 생각해보자

  • 3개의 탭이 열려있고, 각 탭은 독립적인 렌더러 프로세스에 의해 실행

  • 이때 한 탭이 응답하지 않으면 그 탭만 닫고 실행 중인 다른 탭으로 이동할 수 있음

  • 만약 모든 탭이 하나의 프로세스에서 실행 중이었다면 탭이 하나만 응답하지 않아도 모든 탭이 응답하지 못하게 됨

  • 또 다른 장점

  • 보안과 격리(sandbox)

  • 운영체제를 통해 프로세스의 권한을 제한할 수 있음

  • 브라우저는 특정 프로세스가 특정 기능을 사용할 수 없게 제한할 수 있음

  • 프로세스는 전용 메모리 공간을 사용

  • 서로 다른 프로세스는 메모리를 공유할 수 없음

  • 공통부분 (예를 들어 Chrome의 Javascript 엔진인 V8)을 복사해서 가지고 있는 경우가 많음

  • 다중 프로세스 아키텍처가 Chrome이 메모리를 많이 사용하는 이유

더 많은 메모리 절약 - Chrome의 서비스화

• Chrome은 브라우저의 각 부분을 서비스로 실행해 여러 프로세스로 쉽게 분할하거나 하나의 프로세스로 통합할 수 있도록 아키텍처를 변경하고 있음
• 성능이 좋은 하드웨어에서 Chrome이 실행 중 => 각 서비스를 여러 프로세스로 분할해 안정성을 높임
• 리소스가 제한적인 장치에서 실행 => 서비스를 하나의 프로세스에서 실행해 메모리의 사용량을 줄임

프레임별로 실행되는 렌더러 프로세스 - 사이트 격리

• iframe의 사이트를 변도의 렌더러 프로세스에서 실행

• 탭마다 렌더러 프로세스를 할당하는 모델에서는 서로 다른 사이트 간에 메모리가 공유될 수 있다는 문제가 있어 지속적으로 논의되었음

• 동일 출처 정책은 웹 보안 모델의 핵심

• 한 사이트는 동의 없이 다른 사이트의 데이터에 접근할 수 없어야 함

• 하지만 사이트 격리는 다른 렌더러 프로세스를 할당하는 것만큼 간단하지 않다

• iframe이 서로 통신하는 방식을 근본적으로 바꿔야 함

• 다른 프로세스에서 실행되는 iframe이 있는 웹 페이지에서 개발자 도구를 자연스럽게 사용하게 하려면 눈에 보이지 않은 많은 작업이 뒤에서 이루어져야 함