on
웹 브라우저에 대해서 (1)
웹 브라우저에 대해서 (1)
한 줄 정리
웹 브라우저는 HTML 문서나 파일 등 인터넷의 콘텐츠를 검색 및 열람하기 위한 응용 소프트웨어이다.
웹 브라우저란?
웹 브라우저(Web Browser)는 사용자가 선택한 리소스를 서버에 요청하고 브라우저 창에 표시하는 응용 소프트웨어다.
여기서 리소스란 일반적으로 HTML 문서이지만, PDF, 이미지 등 여러 콘텐츠가 될 수 있다.
초기 웹 브라우저는 웹서핑 전용 어플리케이션에 불과했지만 HTML5등이 발달하며 점차 기능이 확대되었고, 거의 모든 프로그램의 기능 구현이 가능해지고 있다.
사용자 수가 많고, 인지도가 높은 웹 브라우저는 Microsoft Edge, Chrome, Firefox, Safari, Opera이며, 이를 '5대 브라우저'리 부른다.
웹 브라우저 기본 구조
사용자 인터페이스(User Interface) :
웹 페이지에서 사용할 수 있는 모든 시각적 요소
페이지 창을 제외한 나머지 모든 부분(예: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)
: 웹 페이지에서 사용할 수 있는 모든 시각적 요소 페이지 창을 제외한 나머지 모든 부분(예: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등) 브라우저 엔진(Browser Engine) :
브라우저의 핵심 구성 요소로 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
사용자 인터페이스에서 받은 입력을 렌더링 엔진에 쿼리 및 처리
: 브라우저의 핵심 구성 요소로 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 사용자 인터페이스에서 받은 입력을 렌더링 엔진에 쿼리 및 처리 렌더링 엔진(Rendering Engine) :
사용자가 요청한 콘텐츠를 화면에 표시
HTML 문서 내 HTML과 CSS를 파싱(해석)하여 사용자 인터페이스에 출력
: 사용자가 요청한 콘텐츠를 화면에 표시 HTML 문서 내 HTML과 CSS를 파싱(해석)하여 사용자 인터페이스에 출력 통신(Networking) :
HTTP 또는 FTP와 같은 표준 프로토콜을 사용하여 네트워크 호출에 사용
또한 인터넷 통신과 관련된 보안 문제를 처리
: HTTP 또는 FTP와 같은 표준 프로토콜을 사용하여 네트워크 호출에 사용 또한 인터넷 통신과 관련된 보안 문제를 처리 UI 백엔드(UI Backend) :
select box / input 등 위젯을 형성하는 데 사용
: select box / input 등 위젯을 형성하는 데 사용 자바스크립트 해석기(JS Interpreter) :
자바스크립트 코드를 분석 및 실행
: 자바스크립트 코드를 분석 및 실행 데이터 저장소(Data Persistence):
데이터를 정장하는 계층으로 쿠키와 같은 모든 종류의 데이터를 저장
LocalStorage, IndexedDB, WebSQL 및 FileSysyem과 같은 저장소 메커니즘 지원
그림 1) 웹 브라우저의 주요 구성 요소
렌더링 엔진
5대 브라우저에서 사용되는 렌더링 엔진은 Blink, Gecko, WebKit이다.
Blink 기반
WebKit 엔진의 포크로 생성된 렌더링 엔진이지만, WebKit 엔진과 프로세스 구조가 다르다.
Chrome
Microsoft Edge
Brave
삼성 인터넷
Opera
웨일 등
Gecko 기반
모질라에서 자체적으로 개발한 오픈소스 렌더링 엔진이다.
Firefox 등
WebKit 기반
애플에서 개발한 오픈소스 렌더링 엔진으로 모든 iOS는 WebKit을 사용해야한다.
Safari
iOS용으로 개발된 모든 웹 브라우저 등
렌더링 엔진 동작 과정
렌더링 엔진은 통신(Networking)으로부터 요청한 리소스(HTML문서, PDF 등)을 얻는 것으로 시작되며, 리소스들은 8KB 단위로 전송된다.
그림 2) 렌더링 엔진의 동작 과정
참고자료
탈리 가르시엘(Tali Garsiel) - How Browsers Work: Behind the scenes of modern web browsers
BrowserStack - Understanding the Role of Rendering Engine in Browsers
나무위키 - 웹 브라우저
위키백과 - 웹 브라우저
백산의 벨로그 - 웹 브라우저의 작동 구조
from http://mystudy.tistory.com/20 by ccl(A) rewrite - 2021-12-10 09:02:16