크롬 브라우저의 프로세스들

devAnderson·2022년 2월 9일
0

TIL

목록 보기
53/105

프로세스란

프로세스란 컴퓨터가 OS로부터 실행명령어, 변수, 함수 등을 할당받아 메모리에 탑재되어 실행되는 단위를 뜻한다.
스크린샷 2022-02-09 오전 10 22 44

일반적으로 브라우저마다 다르지만, 크롬 브라우저가 켜지는 순간 여러개의 프로세스들이 동시적으로 실행이 된다.
대표적인 프로세스들은 다음과 같다

  1. Browser Process : 크롬 브라우저의 전체적인 내용을 담당하는 영역이다. 랜더 영역 이외의 영역에 더 많은 관여를 한다.

    참고로 screen 은 모니터 화면영역, page는 document 실제크기, window는 브라우저의 랜더링 영역을 뜻한다.
    스크린샷 2022-02-09 오전 10 27 08

  2. Network process : 인터넷 통신과 관련된 처리를 담당하는 영역이다.

  3. UI Process : 브라우저 창 위에 존재하는 UI들을 처리하는 영역이다

  4. GPU process : 랜더링 영역에서 그래픽적인 작업에 처리를 도와주는 영역이다.

  5. Plugin process : 각 플러그인들마다의 처리를 담당하는 영역이다. (플러그인 하나당 한개씩 존재)

  6. Renderer process : html을 받아서 실제 랜더링을 담당하는 영역이다 (탭마다 한개씩 존재한다)

  7. Storage process : 로컬스토리지, 세션스토리지와 같은 브라우저 내 저장공간을 담당하는 영역이다.

브라우저의 주소창이 입력된 이후 크롬 브라우저가 하는 일

  • UI process는 우선 해당 입력된 내용이 url인지, 아니면 검색 키워드인지를 분석한다. (
    스크린샷 2022-02-09 오전 10 34 08

아직 엔터를 누르기 전이기 때문에 그냥 판단만 바로 해서 url이면 network process로 전달할 준비를, query면 구글의 search engine에 전달할 준비를 하게된다

  • 유저가 enter을 누르는 순간 url기준으로 하면 network process에게 이것을 전달하면서 본인은 UI로 탭에 로딩 스피너를 띄운다.

  • network process는 전달받은 url에 대한 요청을 위해 DNS 서치 후 ip 패킷 생성 => TCP 새그먼트로 래핑 => 만약 https 통신일 경우, TLS 연결 을 진행한 뒤 네트워크를 통해 서버로 요청을 보낸다.
    스크린샷 2022-02-09 오전 10 37 41

  • 이후 응답을 받으면 network thread는 해당 응답의 타입을 확인한다 ( html이 아니라면, 예를들어 파일다운로드라면 다운로더에게 해당 내용을 전달해야 하기 때문) html이라면 이 주소가 safe한지 안한지를 확인하고, 안전하지 않다면 warning page를, cross site라면 에러 콘솔을 띄운다.

  • 데이터가 완료가 되면 UI process에게 해당 내용을 전달한다. UI process는 데이터를 받고 미리 준비해뒀던 redering 엔진 타입들중에 일치하는 내용에게 해당 내용을 전달하고,

  1. 주소창을 해당 url로 바꾸고
  2. security (자물쇠) 와 관련된 UI 를 업데이트하고
  3. seession history에 기존 탭 정보를 저장한다. (뒤로가기를 위함)

랜더링 프로세스가 탭마다 존재하는 이유

스크린샷 2022-02-09 오전 10 56 21

탭이 하나가 생성이 되면, Browser process는 자동으로 새로운 rendering process를 메모리에 탑재시킨다.

이것이 탭을 여러개 띄우면 컴퓨터가 느려진다는 의미가 된다. 즉 탭 하나당 메모리를 잡아먹기 때문이다.

프로세스란 위에서 언급했듯, 실행을 위한 각종 명령어, 변수, 함수등이 묶여 메모리 위에서 실행되고 있는 단위라고 하였다.

즉, 각 탭마다 독립적인 프로세스를 가지고 있기 때문에 어느 한 탭에서 로딩 에러가 나더라도 다른 탭의 실행절차와는 전혀 영향력이 가지 않는다.

또한, 보안적인 문제로도 그러한데 만약 html을 랜더링 엔진이 파싱하던 도중 내부에 임베딩 ( iframe, img 등등 ) 과 같이 외부 리소스를 요청하는 태그들이 존재한다면 랜더링 엔진은 또다른 rendering process를 만들어서 이를 메모리에 탑재시킨다

스크린샷 2022-02-09 오전 10 59 03

즉, 예를들어 iframe에서 새로운 페이지가 띄워진다면 이것은 독립적인 redering process를 가진 영역이 된다.
따라서, CORS 규칙과 같이 서로의 rendering process 상에 존재하는 사이트 주소의 내용을 비교하여 서로 다를 경우 극히 제한적인 행동이 가능하도록 만드는 것이다. (즉, a.com의 프로세스 영역에 있는 내용을 새로 임베딩된 b.com의 프로세스 영역이 함부로 참조하거나 바꾸거나 할 수가 없다.)

profile
자라나라 프론트엔드 개발새싹!

0개의 댓글