15-1. 브라우저란?

웹 브라우저(web browser)는 기본적으로 웹 서버에서 받아온 정보를 화면에 출력한다. 서버에서 받아온 정보는 HTML 문서, 이미지, 비디오 등이 있다. 주요 웹 브라우저는 Chrome, Firefox, Internet Explorer, Safari 및 Opera가 있다. 웹 트래픽(Web Traffic, 웹 사이트에 방문한 사람들이 주고받은 데이터의 양으로 방문자 수와 방문 페이지 수에 따라 결정됨)의 95%를 차지한다.

웹 서버는 해당 정보를 HTTP(HyperText Transfer Protocol)를 따라 클라이언트 웹 브라우저에 전송하며, 웹 브라우저는 해당 결과를 표시한다.

15-1-1. 브라우저의 기본 구조

브라우저의 기본 구조는 그림과 같이 7가지 구성요소로 이루어져 있다.

알잘딱깔센 JavaScript

1. User Interface (사용자 인터페이스)

• 사용자가 웹 페이지에서 사용할 수 있는 모든 시각적 요소와 상호 작용할 수 있다. 시각적 요소에는 ****주소 표시줄, 뒤로 가기 버튼, 앞으로 가기 버튼, 새로고침, 홈 버튼 및 책갈피 표시줄과 같은 탐색 버튼이 있다.
• 이런 버튼들과 웹 사이트에서 응답받은 콘텐츠를 표시하는 뷰포트(화면)가 있고 인터페이스의 특정 표준은 없으나 브라우저는 수년에 걸쳐 발전하며 UI가 개선되었다.

2. Browser Engine (브라우저 엔진)

• 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하며 모든 웹 브라우저의 핵심 구성 요소이다. 사용자가 주소 표시줄에 입력한 URL를 입력하면 URL를 전달받은 브라우저 엔진이 자료 저장소에서 해당 URL에 맞는 자료를 찾는다. 그리고 해당하는 자료들을 렌더링 엔진에 전달한다. 만약 자료 저장소에 저장된 자료가 없다면 URL 값만 렌더링 엔진에 전달한다.

3. Rendering Engine (렌더링 엔진)

알잘딱깔센 JavaScript

• 이름에서 알 수 있듯이 이 구성 요소는 사용자가 요청한 특정 웹 페이지를 화면에 렌더링 하는 역할을 한다. 브라우저 엔진에게 전달받은 HTML 및 XML 문서를 파싱 해서 요청한 웹페이지를 표시한다. URL 값만 전달받았다면, URL를 Networking에 전달해 데이터를 받아오고 JS Engine을 통해 받아온 JS 파일을 파싱 한 후, 생성된 Render Tree를 UI Backend로 전달한다.

💡 모든 브라우저에는 고유한 렌더링 엔진이 있다. 렌더링 엔진은 브라우저 버전에 따라 다르다. 아래 목록은 일반적인 브라우저에서 사용되는 브라우저 엔진 목록이다. 

- Google Chrome and Opera v.15+: Blink

- Internet Explorer: Trident

- Mozilla Firefox: Gecko

- Chrome for iOS and Safari: WebKit

4. Networking (통신)

• 렌더링 엔진으로부터 요청을 받아서 HTTP(HyperText Transfer Protocol) 또는 FTP(file transfer protocol)와 같은 표준 프로토콜을 사용하여 네트워크 호출을 관리하는 역할을 한다. 입력받은 URL에 해당하는 데이터를 렌더링 엔진에게 전달한다. 또한 인터넷 통신과 관련된 보안 문제를 처리한다.

5. JS Engine (자바스크립트 해석기)

• Javascript Interpreter라고도 부르며 이름에서 알 수 있듯이 웹 사이트에 포함된 JavaScript 코드의 구문을 분석하고 실행하는 역할을 한다. 해석된 결과가 생성되면 사용자 인터페이스에 표시하기 위해 렌더링 엔진으로 전달된다.

6. Data Storage (자료 저장소)

• 자료를 저장하는 계층으로 LocalStorage나 Cookie와 같이 보조기억장치에 데이터를 저장하는 자료 저장소이다. 자주 받아오는 자료를 저장해두어 서버에 반복적으로 요청하는 작업을 줄인다. 또한 자주 접근될 데이터를 더 빠른 속도의 메모리상에 가져와 연산을 수행해 성능을 최적화하는 캐싱 (Caching)이 이루어진다.

7. UI Backend (UI 백엔드)

• 콤보 박스(Select box), 체크 박스, 버튼, 창 같은 기본적인 장치를 그려주는 구성 요소이다.

15-2. 브라우저 렌더링

15-2-1. 렌더링이란?

브라우저 렌더링은 사용자가 주소창에 특정 URL을 입력하여 접속하거나 링크를 클릭했을 때, 특정 양식 값을 제출했을 때 등 사용자의 요청이 있을 때 발생한다. 물론 사용자가 URL을 입력할 때마다 항상 서버에서 동일한 데이터를 받아오진 않는다. 이 때 필요한 최적화는 하단에서 살펴보도록 하자. 이렇게 브라우저 요청에 따라 URL과 연결되어 있는 서버에서 네트워크를 통해 데이터를 전송받는다. 렌더링 엔진은 전송받은 HTML 문서를 해석하여 사용자가 볼 수 있도록 화면에 그려준다. 이러한 과정을 렌더링이라고 한다.

15-2-2. 브라우저 렌더링 과정

브라우저의 종류마다 렌더링 엔진의 세부 과정 등은 약간의 차이가 있지만 전체적 작동 방식은 유사하므로 브라우저 렌더링 과정이 기본적으로 어떻게 진행되는지 살펴보자.

알잘깔딱센 JavaScript

1. HTML 파싱 및 DOM 트리 구축

알잘딱깔센 JavaScript

먼저 HTML문서를 파싱하고 DOM 트리를 구축한다. HTML 파싱에는 토큰화 및 트리구조를 포함한다. HTML 파싱 단계에서 렌더링 엔진은 서버에서 전송받은 바이트를 문자로 변환하고 토큰을 식별한다. 토큰화에는 시작태그와 종료태그를 포함하고 있으며, 속성과 값 또한 포함한다. 토큰 식별 후 노드로 전환하고 각 태그간의 관계와 계층 구조를 반영하여 DOM 트리를 구축한다. 파싱 중에 이미지같은 비동기 리소스를 만나면 브라우저가 해당 리소스를 요청하고 파싱을 계속 진행한다. 이 때 렌더링 엔진은 멈추지 않는다.

<header>
	<script src="script.js" async></script>
</header>