브라우저의 구성 요소와 렌더링 과정

브라우저의 렌더링 원리

브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워크, 자바스크립트 인터프리터, UI백엔드, 스토리지로 구성되어 있다. 브라우저가 화면을 렌더링 할 때, CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다.

 

(1) 브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 캐시에서 자료를 찾는다.

사용자가 주소표시줄에 입력을 하는 순간, 브라우저 엔진이 주소 값에 해당하는 캐싱된 데이터가 있는지 캐시에서 찾아본다.

 

(2) 렌더링 엔진이 브라우저 엔진 또는 네트워크로부터 자료를 받는다.

- 캐싱된 자료가 있다면 브라우저 엔진으로부터 렌더링 엔진이 자료를 받아 HTML, CSS, image 등을 파싱한다.

- 캐싱된 자료가 없다면 사용자가 입력한 URI를 전달받아 네트워크를 통해 서버에 요청해서 자료를 응답받는다.

- 렌더링 엔진은 네트워크에 URI 주소 값을 전달한다. 네트워크는 URI 주소 값으로 서버에 요청을 보내고, 응답으로 주소 값에 해당하는 html, css, js 값을 받으면 렌더링 엔진에게 건네주어 HTML, CSS, 리소스 등을 파싱한다.

 

(3) 렌더링 엔진이 js 인터프리터 및 네트워크와 소통하며 렌더링 구조를 그려 UI 백엔드에 넘긴다.

1. HTML 파싱 및 DOM 트리 구축: 렌더링 엔진은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. 이 단계에서 렌더링 엔진은 HTML 태그, 속성 등을 해석하고 DOM 노드를 생성하여 계층 구조로 구성한다. DOM 트리는 문서의 구조를 나타내는 트리 구조이며, 요소들의 상하계층 관계를 포함한다.

2. CSS 파싱 및 CSSOM 트리 구축: 렌더링 엔진은 CSS 스타일 시트를 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM 트리는 CSS 스타일 규칙을 표현하는 트리 구조로서, DOM 트리의 각 노드에 적용되는 스타일 규칙을 결정한다. CSSOM 트리는 DOM 트리와 동기화되어 요소의 스타일 정보를 참조하고 계산한다.

3. 렌더 트리(Render Tree) 구축: 렌더링 엔진은 DOM 트리와 CSSOM 트리를 조합하여 렌더 트리를 구축한다. 렌더 트리는 실제로 화면에 표시되는 요소들로 구성된다. 렌더 트리는 화면에 그려지는 객체들의 집합으로서, 레이아웃 계산과 페인팅 작업에 사용된다.

4. 자바스크립트 해석 및 실행: 자바스크립트 코드는 자바스크립트 엔진의 인터프리터에 의해 해석되고 실행된다. 자바스크립트 엔진은 코드를 실행하며, DOM 트리와 CSSOM 트리를 수정하거나 이벤트 처리 등을 수행할 수 있다.

5. 렌더링 및 화면 표시: 렌더링 엔진은 렌더 트리를 기반으로 UI 백엔드에게 화면에 그릴 요소들을 전달한다. UI 백엔드는 요소들을 페인팅 작업을 통해 화면에 표시한다. 이 단계에서는 레이아웃 계산, 페인팅, 컴포지팅 등 다양한 단계를 거쳐 최종적으로 화면에 내용이 나타난다.

 

정리하자면, 렌더링 엔진은 HTML과 CSS를 파싱하여 DOM과 CSSOM을 구축하고, 이를 조합하여 렌더 트리를 구축한다. 이후 화면에 표시하기 위해 렌더 트리를 렌더링하고, UI 백엔드에게 요소들을 전달하여 화면에 그려진다.

 

 

1. Parse HTML을 통해 HTML 파싱 후, DOM 트리 구축
2. Parse Stylesheet를 통해 CSS 파싱 후, CSSOM 트리 구축
3. Evaluate Script를 통해 Javascript 실행렌더트리 구축
4. Layout을 통해 뷰포트 기준으로 렌더트리 노드들의 각 크기/위치 계산
5. Paint를 통해 Layout에서 계산한 값들로 각 요소를 화면에 그림

 

 

<참고>

브라우저의 구성 요소와 렌더링 과정

https://d2.naver.com/helloworld/59361