<aside> ✨ Create Date: 2023/01/16 Update Date: 2023/01/17
Inside look at modern web browser (part3)을 번역한 글입니다. 오역이 있을 수 있습니다.
</aside>
해당 글은 4부로 나뉘어 있으며 시리즈에서는 높은 수준의 아키텍처에서 렌더링 파이프라인의 세부 사항까지 Chrome 브라우저의 내부를 살펴볼 예정입니다.
이번 챕터는 Chrome의 내부 동작을 살펴보는 4부작 시리즈 중 3번째 파트입니다.
이 게시물에서는 renderer process 내부에서 어떤 일이 발생하는지 살펴보겠습니다.
renderer process는 웹 성능의 여러 측면과 관련이 있습니다. renderer process 내부에서는 많은 일이 발생하므로 이 게시물은 일반적인 개요이기에 더 자세히 알기 위해선 웹 기초 성능 섹션 글을 확인해보세요!
renderer process는 탭 내부에서 발생하는 모든 일을 담당합니다. renderer process에서 기본 thread는 사용자에게 보내는 대부분의 코드를 처리합니다.
web worker 또는 service worker를 사용하는 경우 JavaScript의 일부가 worker thread에 의해 처리되는 경우가 있습니다.
Compositor와 Raster thread 모두 renderer process 내부에서 실행되기에 페이지를 효율적이고 원활하게 렌더링합니다. (Compositor, Raster는 아래에서 자세히 이야기합니다)
Renderer Process의 핵심 작업은 HTML, CSS, JavaScript를 이용하여 사용자가 상호 작용할 수 있는 웹 페이지로 변환하는 것입니다.
그림1: main, worker, compositor, raster thread를 포함하는 Renderer Process
Renderer Process가 Navigation바에 정보를 등록했다는 메세지를 받고 (5단계, Commit Navigation) HTML 데이터를 받기 시작하면 main thread는 텍스트 문자열(HTML)을 분석하여 DOM (Document Object Model)으로 변환하기 시작합니다.