브라우저의 렌더링 과정

브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

자원은 보통 HTML 문서이고, 자원의 주소는 URI에 의해 정해진다.

브라우저의 기본 구조

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어함

렌더링 엔진

사용자에게 요청받은 내용을 브라우저에 표시함

예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함

통신

HTTP 요청과 같은 네트워크 호출에 사용됨.

UI 백엔드

콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스

자바스크립트 해석기

JS 코드를 해석하고 실행

자료 저장소

쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장

렌더링 엔진 동작 과정

파싱 - 렌더 - 레이아웃 - 페인팅

1. 서버로부터 html 파일과 css 파일을 넘겨받는다

   주소창에 url을 입력하면, 브라우저는 렌더링에 필요한 요소(html, css, js 등)들을 서버에 요청한다.

2. 파싱하여 각각의 DOM/CSSOM을 생성한다.

   HTML을 파싱하여 DOM 트리로,

   CSS 정보들을 합쳐 CSSOM 트리로 구축한다.

   • *파싱 문장이 이루고 있는 구성 성분을 분해하고 분해된 성분의 위계 관계를 분석하여 구조를 결정하는 형태. 웹상에서 주어진 정보를 내가 원하는 형태로 가공하여 서버에서 불러들이는 것 파싱이라는 과정을 거쳐 문법적인 의미를 부여해야 컴퓨터가 언어를 해석할 수 있다. 해당 요소들은 텍스트에 불과하기 때문에 파싱을 통해 브라우저가 이해할 수 있는 자료구조 형태로 만듦
     

3. 렌더링 트리 구축

   DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성한다.

   페이지를 렌더링하는데 필요한 노드만 남겨 화면에 표시되는 모든 노드의 컨텐츠 및

   스타일 정보들을 포함하는 구조로 이루어진 렌더링 트리가 최종적으로 구축된다.

   브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는

   Tree 자료구조 형태인 DOM을 만든다.

1. 렌더링 트리 배치

   사용자의 뷰포트 기준으로 렌더링 트리가 그려질 위치와 크기들을 계산하는 단계

   레이아웃을 구상하고 페이지에 출력될 노드들의 크기와 위치, 레이어간의 순서정보를 계산한다.

2. 렌더링 트리 그리기

   레이아웃 단계를 통해 배치된 엘리먼트들의 스타일링을 실행함