브라우저에서 페이지를 렌더링하는 방식
렌더러 프로세스(Renderer Process)
- 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다.
- 렌더러 프로세스 안에서는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하게 된다.
- 웹 페이지를 효율적이고 부드럽게 렌더링하기 위해 별도의 컴포지터 스레드와 레스터 스레드가 렌더러 프로세스에서 실행된다.
- 렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹페이지로 만드는 것이다.
스레드 종류
- 메인 스레드 (Main Thread) : 웹 페이지를 실행하는 기본적인 스레드. 모든 UI 업데이트와 사용자 입력 처리, DOM 변경, JS 실행 등 기본 작업 실행 한다.
- 워커 스레드 (Web Workers) : 메인 스레드와는 별개로 동작하는 백그라운드 스레드. CPU 집약적인 작업을 메인 스레드와 분리하여 처리 할 수 있게 해준다.
- 컴포지터 스레드 (Compositor Thread) : 브라우저에서 화면 렌더링을 담당하는 스레드. 페이지의 각 요소를 렌더링하고 이를 조합하여 최종적으로화면에 표시되는 그림을 만든다.
- 레스터 스레드 (Raster Thread) : 이미지나 비디오 등의 비트맵 데이터를 처리하는 스레드. 화면에 표시될 렌더링 데이터를 픽셀 단위로 변환하고 GPU를 활용해 이미지를 렌더링 하는 작업을 수행한다.
DOM 구축
- 페이지를 이동하는 내비게이션 실행 메시지를 렌더러 프로세스가 받고 HTML 데이터를 수신하기 시작하면 렌더러 프로세스의 메인 스레드는 문자열(HTML)을 파싱해서 DOM으로 변환하기 시작한다.
- DOM이란 페이지에 대한 브라우저의 내부 표현일 뿐만 아니라 웹 개발자가 자바스크립트를 통해 상호작용할 수 있는 데이터 구조 및 API이다.
바이트를 문자로, 문자열을 <body>와 같은 토큰으로, 토큰을 프로퍼티와 규칙을 가진 객체로 만들고 최종적으로 이 객체들을 서로 연결하면서 데이터 구조를 만드는 순서로 진행된다.
하위리소스(subresource) 로딩
- 웹 사이트는 일반적으로 이미지, CSS, JavaScript와 같은 외부 리소스를 사용한다.
- 이러한 파일은 네트워크나 캐시에서 로딩해야 한다. 리소스를 만날 때마다 메인 스레드가 하나하나 요청하는 것 보다 속도를 높이기 위해 ‘프리로드(Preload) 스캐너’가 동시에 실행된다.
- HTML 문서에 <img> 또는 <link>와 같은 태그가 있으면 프리로드 스캐너는 HTML 파서가 생성한 토큰을 확인하고 브라우저 프로세스의 네트워크 스레드에 요청을 보낸다.
<script> 태그를 만나면?
- <script> 태그를 만나면 HTML 파서는 HTML 문서의 파싱을 일시 중지한 다음 JavaScript 코드를 로딩하고 파싱해야 한다.
- **document.write()**과 같은 DOM 구조 전체를 바꿀 수 있는 메서드 사용 때문
- <script> 태그에 async 속성이나 defer 속성을 추가
- JavaScript 코드를 비동기적으로 실행한다. (HTML 파싱 막지 않음)
- JavaScript 모듈 사용 가능
스타일 계산
- 메인 스레드는 CSS를 파싱 하여 각 DOM 노드에 대한 계산된 스타일을 결정한다.
- CSS를 전혀 적용하지 않아도 DOM 노드에는 계산된 스타일이 적용되어 있다.
레이아웃
- 레이아웃은 요소의 기하학적 속성을 찾는 과정이다.
- 메인 스레드는 DOM과 계산된 스타일을 훑어가며 레이아웃 트리를 만든다.
- 레이아웃 트리는 X,y 좌표, 박스 영역의 크기와 같은 정보를 가지고 있다.
페인트
- 메인 스레드는 페인트 기록을 생성하기 위해 레이아웃 트리를 순회한다.
- 렌더링 파이프라인에서 파악해야 할 가장 중요한 점은 각 단계에서 이전 작업의 결과가 새 데이터를 만드는 데 사용된다는 것이다.
합성
- 웹 페이지의 각 부분을 레이어로 분리해 별도로 래스터화하고 컴포지터 스레드라고 하는 별도의 스레드에서 웹 페이지로 합성하는 기술이다.
참조
https://ajdkfl6445.gitbook.io/study/web/browser-rendering
https://d2.naver.com/helloworld/5237120
'🎒내가방 > 📒JavaScript' 카테고리의 다른 글
| [JavaScript] TDZ(Temporal Dead Zone)와 가비지 컬렉터(Garbage Collector) (0) | 2025.02.19 |
|---|---|
| [JavaScript] 실행컨텍스트와 클로저의 이해 (0) | 2024.11.25 |
| [모던 자바스크립트] Ajax와 REST API (2) | 2024.10.23 |
| [모던 자바스크립트] this 키워드 (1) | 2024.10.22 |
| [모던 자바스크립트] 배열 고차 함수 (sort, forEach, map, filter) (1) | 2024.10.21 |
