브라우저, 그리고 동작 방식

우리는 매일 휴대폰, 노트북을 통해서 인터넷을 사용하고 이는 브라우저를 통해서 이루어지는 행동이다. 브라우저가 뭔지 모르는 사람도 있다면 우리가 인터넷을 사용하기 위해서 누르는 크롬, 익스플로러, 사파리등이 모두 브라우저라는 프로그램이다.

 

브라우저는 사용자가 보고자 하는 페이지를 서버에 요청하고 서버에서 받은 응답을 브라우저에 표시해주는 것이다.

 

주요 기능

브라우저는 HTML 과 CSS 면세에 따라 HTML 파일을 해석해서 표시하며 이는 웹 표준화 기구인 W3C (World Wide Web Consortium) 에서 정한다. 이는 과거에 브라우저들이 일부 명세만 따르고 독자적인 방법으로 브라우저를 확장시킴으로써 호환성에 심각한 문제를 겪으며 최근에 와서는 대부분의 브라우저가 W3C의 표준 명세를 따르게 되었다.

 

현재 대부분의 브아우저는 서로의 장점을 모방하며 발전해왔고 현재와 같은 모습이 되었다. HTML5의 명세를 살펴보면 주소표시줄, 상태표시줄, 도구 모음과 같은 범용적인 요소를 제외하면 필수 UI를 정의하지 않았으며 각 브라우저는 이 표준외에 각자만의 특화된 기능을 통해서 사용자를 유치하고 있다고 할 수 있다.

 

www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

이곳을 보면 브라우저에 대한 상세한 설명이 나와있는데, 한번 살펴보도록 하자.

 

기본 구조

1. 유저 인터페이스 : 이전, 다음, 새로고침, 북마크와 같이 페이지를 보여지는 부분외에 브라우저를 사용하는 모든 유저에게 동일하게 보이는 부분 
2. 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진 사이에 쿼리를 전달할 수 있게 조작을 담당
3. 렌더링 엔진 : 사용자가 요청한 페이지를 화면에 나타내기 위해 HTML과 CSS를 분석
4. 네트워킹 : http를 요청하고 네트워크 호출에 사용
5. 자바스크립트 해석기 : javascript 코드를 해석 및 실행
6. UI 백엔드 : 기본적인 UI들 그리는데 사용. 보통 콤보 상자와 창과 같은 기본 위젯을 그리는데 사용
7. 자료 저장소 : 쿠키와 같은 자원들을 저장한다.

그럼 이 모든 과정을 다 알아야 할까? 

기본적인 작동과정을 알았다면 중요한게 어떤 부분인지를 먼저 알아야 한다.

 

위 구조에서 가장 중요한것은 어디일까? 바로 웹서버로부터 응답받은 내용을 UI상에 나타내주는 Rendering engine일 것이다.

어떻게 렌더링 엔진이 작동되는지 알아볼 필요가 있다.

 

 

렌더링 엔진의 작동 방식

브라우저가 여러개 있다면 모든 브라우저가 동일한 렌더링 엔진을 사용할까? 당연히 그렇지 않다. 대부분의 브라우저들은 각자의 렌더링 엔진들을 사용하며 이 엔진에 따라 브라우저의 성능이 달라지기도 한다. 대표적으로 

 

Firefox : 모질라에서 만든 Gecko 엔진

Safari & Chrome : Webkit 엔진( opensource) 

 

하지만 렌더링 엔진이 다를지라도 대부분의 동작과정이 비슷하다.

 

동작과정

1. HTML 파싱 후 돔트리 구축
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기

• HTML, CSS는 각각의 파서가 존재하며 HTML은 각 태그들로 DOM트리 구성, CSS도 스타일 규칙에 맞게 파싱한 후 같이 '렌더 트리'를 생성
• 그 후 배치가 시작되는데, 각 노드가 화면의 정확한 위치에 표시되는 것을 의미
• 그리기 과정 시작
• 모든 내용을 한번에 파싱된 후 페이지를 보여주기에는 속도가 느릴 수 있으므로 기다리지 않고 파싱된 순으로 배치가 이루어진다
• 네트워크로부터 나머지 페이지가 전송되는 동안 받은 내용을 먼저 화면에 표기해준다

위 그림 두개는 Webkit 과 Gecko의 렌더링 엔진 구조이다.

위  구조를 보면 다른 용어를 사용하지만 결국 기본적인 흐름은 동일함을 알 수 있다. 

 

 

1. HTML 파싱 후 돔 트리 구축

 

HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.

DOM(Document Object Model)은 마크업과 1:1 관계를 맺는다.

 

 

2.  CSS 파싱 후 렌더 트리 구축

 

 

3. 렌더트리 배치

위에서 만든 렌더트리는 이 배치 과정을 통해 각 노드들에게 스크린의 어느 공간에 위치할지 각각의 크기와 위치값을 부여받는다.

 

 

 

4. 렌더트리 그리기

렌더 트리가 만들어지고 레이아웃이 구성되었다면 UI 백엔드가 동작하며 각 노드들을 스타일, 크기, 위치에 맞게 화면에 배치한다. 이 과정이 빨라야 페이지의 로딩이 빠르다고 느끼기 때문에 모든 HTML과 CSS파일의 요소들을 한번에 렌더링엔진으로 넣어 출력하지 않고 일부 콘텐츠가 트리과정을 거쳤다면 먼저 스크린에 띄우고 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어 들어오는 순차적으로 입출력을 진행한다.