웹 브라우저 렌더링
Intro
지난 게시글에서는 클라이언트에게 전달되는 콘텐츠(HTML
, CSS
, JS
)가 어떤 과정을 거쳐 현재의 모습으로 발전해 왔는지 알아봤다.
그러니 이번 주제는 자연스럽게 서버에서 전달 받은 HTML 문서
를 브라우저가 어떻게 그려내는지(rendering
)일 것이다.
바로 시작하자.
브라우저의 개념
웹 브라우저란 웹에서 정보를 탐색하고 HTML 문서, 이미지 등 여러 콘텐츠를 우리에게 표현해주는 소프트웨어
파인더(탐색기)가 파일 시스템을 통해 내 컴퓨터에 저장된 파일들에 접근할 수 있는 것처럼, 웹 브라우저는 인터넷을 통해 웹 서버에 저장된 파일들에 접근할 수 있게 해준다.
네트워크: 네트워크는 두 대 이상의 컴퓨터 또는 장치가 서로 연결되어 데이터를 주고받을 수 있는 통신 시스템 ex) LAN(Local Area Network), MAN(Metropolitan Area Network), WAN(Wide Area Network)
인터넷: 전 세계적으로 연결된 컴퓨터 네트워크들의 네트워크(가장 큰 규모의 네트워크)
크롬 아키텍쳐
브라우저라는 소프트웨어를 어떻게 구축할지는 개발자의 재량이니, 가장 메인인 크롬 브라우저의 아키텍쳐를 살펴 보겠다. 크롬은 멀티 프로세스 소프트웨어로 다음과 같은 주요 프로세스들이 있다.
- Browser 프로세스
- 주소 표시줄, 북마크, 뒤로 및 앞으로 버튼을 포함한(사용자 인터페이스) "chrome" 전체를 제어
- 다른 프로세스들을 관리
- 네트워크 요청 및 파일 액세스와 같은 영역 처리
- Renderer 프로세스
- 웹사이트가 표시되는 탭 내부의 모든 것을 제어합니다.
- Plugin 프로세스
- 웹 사이트에서 사용하는 모든 플러그인(flash, media, music...)을 제어합니다.
- GPU 프로세스
- 다른 프로세스와 격리된 상태에서 GPU 작업을 처리합니다.
- GPU는 여러 앱에서 요청을 처리하여 동일한 표면에 그리므로 다른 프로세스로 분리됩니다.
그외 extension process, utility process와 같은 더 많은 프로세스가 있다. More Tools에 Task Manager 클릭하면 확인가능
Chrome의 멀티 프로세스 구조의 장점
- Chrome은 탭마다 기본적 으로 각각 렌더러 프로세스 생성해서 사용하는데 이는 한 탭이 응답하지 않더라도 응답하지 않는 탭을 닫고 다른 탭을 계속 실행하면서 진행할 수 있게 해준다.
- 브라우저의 작업을 여러 프로세스로 분리하는 또 다른 이점은 보안과 샌드박싱이다.
- 운영 체제는 프로세스의 권한을 제한하는 방법을 제공하므로 브라우저는 특정 프로세스를 특정 기능으로부터 샌드박싱가능(보호된 영역에서 동작해 시스템이 부정하게 조작되는 것을 막는 보안 형태)
- Chrome 브라우저는 렌더러 프로세스와 같은 임의 사용자 입력을 처리하는 프로세스에 대한 임의 파일 액세스를 제한한다.
메모리 사용량을 줄이기 위한 노력
process로 탭을 관리하는 것은 thread로 관리하는 것보다 메모리 사용량이 더 많을 수 밖에 없다.
프로세스 생성 오버헤드: 새로운 프로세스를 생성하는 것은 쓰레드를 생성하는 것 보다 상대적으로 많은 시스템 자원을 필요
프로세스 간 메모리 공유 제한: 각 프로세스는 독립적인 메모리 공간을 가지고 있어, 다른 프로세스의 메모리에 직접 접근할 수 없음
프로세스 간 통신 오버헤드: 위의 이유로 프로세스 간 통신(IPC)이 필요
IPC는 메모리 공유, 파이프, 소켓 등의 방법을 사용하는데, 이는 추가적인 메모리 사용을 유발
반면, 스레드는 같은 프로세스 내에서 메모 리를 공유
그렇기에 메모리를 절약하기 위해 Chrome은 생성할 수 있는 프로세스 수에 제한을 둔다. 장치의 메모리와 CPU 성능에 따라 Chrome이 메모리 제한에 도달하면 동일한 사이트에서 여러 탭을 하나의 프로세스에서 실행한다.
또한 Chrome은 브라우저 프로그램의 각 부분을 서비스로 실행하여 다른 프로세스로 분할하거나 하나로 통합할 수 있는 아키텍처 변경을 진행 중인데, Chrome이 강력한 하드웨어에서 실행될 때는 각 서비스를 다른 프로세스로 분할하여 더 많은 안정성을 제공하지만, 리소스가 제한된 장치에서는 Chrome이 서비스를 하나의 프로세스로 통합하여 메모리 사용량을 절약한다는 아이디어를 바탕으로 한다.
탐색(navigation)
이번엔 사용자가 사이트를 요청하고 브라우저가 페이지를 렌더링할 준비를 하는 부분, 즉 탐색(navigation)에 집중해보자.
탭 외부의 모든 것은 브라우저 프로세스에서 처리한다.
브라우저 프로세스에는 UI 스레드, 네트워크 스레드, 스토리지 스레드 등이 있고 주소 표시줄에 URL을 입력하면, 브라우저 프로세스의 UI 스레드가 입력을 처리한다.
- UI 스레드: 브라우저의 버튼과 입력 필드를 관리
- 네트워크 스레드: 인터넷에서 데이터를 수신하기 위한 네트워크 스택을 다룸
- 스토리지 스레드: 파일 접근을 제어