브라우저 기본 구조와 렌더링 과정
- 브라우저란?
- 브라우저 기본 구조 - 브라우저 작동 과정
- Reflow, Repaint 의 성능 최적화
(내용 추가 예정)
브라우저란?
웹 브라우저(web browser), 인터넷 브라우저(internet browser)는 클라이언트와 서버에서 쌍방향으로 통신하고 HTML 문서나 이미지, 비디오 등의 파일을 수신, 전송 및 출력하는 그래픽 사용자 인터페이스(GUI) 기반의 응용 소프트웨어이다. 주요 웹 브라우저로는 Chrome, Firefox, Internet Explorer, Safari 및 Opera가 있으며 이 들은 웹 트래픽(Web Traffic, 웹 사이트에 방문한 사람들이 주고받은 데이터의 양으로 방문자 수와 방문 페이지 수에 따라 결정됨)의 95%를 차지한다.
웹 브라우저의 주요 역할은 주소 표시줄을 통해 웹 URL을 수락하고 리소스를 가져와서 화면에 표시하는 것이다. 브라우저는 클라이언트 서버 모델(Client Server Model)로 클라이언트는 네트워크를 이용해 서버 시스템에 연결된 사용자 측을 말한다. 서버에서 받아온 데이터를 화면에 표시하고 사용자의 요청을 서버에 전달하기 위해 브라우저를 사용한다. 웹 서버는 해당 정보를 HTTP(HyperText Transfer Protocol)를 따라 웹 브라우저에 전송하며, 웹 브라우저는 해당 결과를 표시한다.
브라우저의 기본 구조
브라우저의 기본 구조는 그림과 같이 7가지 구성요소로 이루어져 있다.
-
User Interface (사용자 인터페이스)
- 사용자가 웹 페이지에서 사용할 수 있는 모든 시각적 요소와 상호 작용할 수 있다. 시각적 요소에는 ****주소 표시줄, 뒤로 가기 버튼, 앞으로 가기 버튼, 새로고침, 홈 버튼 및 책갈피 표시줄과 같은 탐색 버튼이 있다.
- 이런 버튼들과 웹 사이트에서 응답받은 콘텐츠를 표시하는 뷰포트(화면)가 있고 인터페이스의 특정 표준은 없으나 브라우저는 수년에 걸쳐 발전하며 UI가 개선되었다.
-
Browser Engine (브라우저 엔진)
- 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하며 모든 웹 브라우저의 핵심 구성 요소이다. 사용자가 주소 표시줄에 입력한 URL를 입력하면 URL를 전달받은 브라우저 엔진이 자료 저장소에서 해당 URL에 맞는 자료를 찾는다. 그리고 해당하는 자료들을 렌더링 엔진에 전달한다. 만약 자료 저장소에 저장된 자료가 없다면 URL 값만 렌더링 엔진에 전달한다.
-
Rendering Engine (렌더링 엔진)
- 이름에서 알 수 있듯이 이 구성 요소는 사용자가 요청한 특정 웹 페이지를 화면에 렌더링 하는 역할을 한다. 브라우저 엔진에게 전달받은 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
- Networking (통신)
- 렌더링 엔진으로부터 요청을 받아서 HTTP(HyperText Transfer Protocol) 또는 FTP(file transfer protocol)와 같은 표준 프로토콜을 사용하여 네트워크 호출을 관리하는 역할을 한다. 받은 URL에 해당하는 데이터를 렌더링 엔진에게 전달한다. 또한 인터넷 통신과 관련된 보안 문제를 처리한다.
- JS Engine (자바스크립트 해석기)
- Javascript Interpreter라고도 부르며 이름에서 알 수 있듯이 웹 사이트에 포함된 JavaScript 코드를 구문 분석하고 실행하는 역할을 한다. 해석된 결과가 생성되면 사용자 인터페이스에 표시하기 위해 렌더링 엔진으로 전달된다.
- Data Storage (자료 저장소)
- 자료를 저장하는 계층으로 LocalStorage나 Cookie와 같이 보조기억장치에 데이터를 저장하는 자료 저장소이다. 자주 받아오는 자료를 저장해두어 서버에 반복적으로 요청하는 작업을 줄인다. 또한 자주 접근될 데이터를 더 빠른 속도의 메모리상에 가져와 연산을 수행해 성능을 최적화하는 캐싱 (Caching)이 이뤄진다.
- UI Backend(UI 백엔드)
- 콤보 박스(Select box), 체크 박스, 버튼, 창 같은 기본적인 장치를 그려주는 구성 요소이다.
Reference
