브라우저 동작 원리

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 *URI (Uniform Resource Identifier)에 의해 정해진다.

*URI란?

인터넷 자원을 나타내는 고유 식별자이다. 인터넷에 있는 자료의 id라고 생각하면 좋을 듯하다. ID는 고유한 값을 의미하는 것이므로 URI는 유일해야한다. URL과 URN은 URI에 포함되는 개념이며, URL은 자원의 위치 그리고 URN은 자원의 이름을 의미한다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 표시하는데 이 명세는 웹 표준호 기구인 W3C에서 정한다.

브라우저의 기본 구조

브라우저의 주요 구성 요소는 다음과 같다.

이번 글에서는 렌더링 엔진에 관해서만 알아보려한다.

렌더링 엔진 동작 과정

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다.

렌더링 엔진 동작 과정은 아래와 같다.

1. DOM트리 구축 위한 HTML 파싱

사용자가 웹사이트에 접속하였을 때, 브라우저는 사용자가 접속한 웹사이트의 서버로부터 HTML 파일을 전달받는다. 이 전달받은 HTML을 브라우저는 *DOM 트리 구축을 위해서 *Parsing을 진행한다.

*DOM이란?

DOM은 HTML 문서의 객체 기반 표현 방식이다. 둘이 서로 비슷하다고 생각할 수 있지만, DOM이 가지고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

*Parsing이란?

언어학에서는 Parsing을 구문 분석이라고 정의한다. 문장을 이루고 있는 구성 성분을 분해하고 그들 사이의 위계 관계를 분석하여 문장의 구조를 결정하는 것이 Parsing이다. 컴퓨터 공학 관점에서는 일련의 문자열을 의미 있는 토큰으로 분해하고 그것들로 이루어진 Parse tree를 만드는 과정이라고 볼 수 있다. 브라우저가 웹사이트로 받아온 문서를 이해하고 사용할 수 있는 구조로 변환하는 것을 파싱이라고 생각하면 된다.

2. 렌더 트리 구축

브라우저는 컨텐츠를 담당하는 HTML 파일을 DOM 트리로 구축하는 동안, 스타일 규칙을 정의하는 CSS 파일 또한 CSSOM 트리로 구축한다. 생성된 DOM 트리와 CSSOM 트리를 합하여 최종적으로 브라우저에 표기될 것들만 선별하기 위해 생성되는 것이 렌더 트리이다. 렌더 트리는 아래 과정을 거쳐 생성 된다.

1) DOM 트리의 루트로부터 시작하여 노드 각각을 읽으며 표시한다.

2) 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.

1번 과정이 실행될 때, 메타 태그나 스크립트 태그와 같은 사용자에게 불필요한 정보는 반영되지 않는다. 또한 display:none과 같은 속성을 가진 태그들 또한 제외된다.

3. 렌더 트리 그리기

브라우저가 가지고 있는 구조 중에 하나인 UI 백엔드가 생성된 렌더 트리 노드들을 가로지르며 화면에 스타일이 적용된 컨텐츠들을 그린다.

중요한 점

브라우저에 렌더링하는 위와 같은 과정이 점진적으로 진행 된다. 이 과정에서 렌더링 엔진은 보다 나은 사용자 경험을 위해 가능한 빠르게 내용을 표시하는데 모든 HTML을 파싱하는 과정을 기다리지 않고 배치와 그리기 과정을 시작한다.

요약

1. 사용자가 접속한 사이트의 자원을 서버로부터 받아온다.
2. 받아온 HTML과 CSS 파일을 파싱을 통하여 트리 구조로 변환한다.
3. 변환된 DOM 트리와 CSSOM 트리를 합하여 렌더 트리를 형성하고 렌더링한다.

참고