브라우저 아래와 같은 구조로 구성되어있다.

1. 사용자 인터페이스 - 주소창, 뒤로가기, 앞으로 가기, 홈버튼 등
2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진의 매체 역할 ( ex. 뒤로가기 클릭 시 렌더링 엔진에 명령 전달 )
3. 렌더링 엔진 - 웹서버로 부터 응답받은 내용을 그림
4. 네트워크 - 웹서버와 통신을 도와줌
5. UI 백엔드
6. 자바스크립트 해석기 - JS 코드를 파싱하고 실행
7. 데이터 스토리지

이 중 렌더링 엔진은 사용자가 요청해서 웹서버에서 응답한 내용을 HTML 과 CSS 로 화면을 구성한다.

렌더링 엔진

렌더링 엔진의 작동방식은 다음과 같다.

1. HTML 문서 파싱

렌더링 엔진은 전달받은 HTML 문서를 파싱 후 DOM Tree 를 만든다.

2. 렌더트리 만들기

DOM Tree 구성 후 CSS 데이터를 이용해 렌더트리를 만든다. 렌더트리는 시각적 요소들로 이루어져 있다.

3. 렌더트리 레이아웃 배치

각 위치값, 사이즈등을 지정한다.

4. 렌더트리 그리기

UI 백엔드가 동작해 각 노드들을 스타일과 위치값에 맞춰 화면에 배치한다.

렌더링 엔진은 콘텐츠를 최대한 빨리 화면에 띄우기 위해 HTML 요소를 한번에 출력하는 것이 아닌 일부를 먼저 출력하고 다른 요소들을 순차적으로 출력한다.

조금 더 자세히 이해하기 위해서는 공부가 더 필요할 것 같다.

브라우저 동작원리