브라우저 소개
사파리, 크롬, 오페라, 인터넷 익스플로러, 파이어폭스와 같은 소프트웨어 입니다.
주요 기능으로는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시합니다.
브라우저 구성요소
User Interface
- 사용자가 접근할 수 있는 영역 입니다.
- 예를 들어, 주소 표시줄, 뒤로가기/앞으로가기 버튼, 새로 고침 버튼 등 브라우저 프로그램 자체의 GUI를 구성하는 부분입니다.
Browser Engine
- User Interface와 Rendering Engine 사이의 동작을 제어해주는 엔진
- 브라우저라는 프로그램의 비즈니스 로직, 핵심 중추 부분 입니다.
- Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 합니다.
Rendering Engine
- 요청 받은 콘텐츠를 화면에 출력하는 역할
- HTML, CSS 등을 파싱하여 최종적으로 화면에 그립니다.
- 종종 브라우저 엔진과 같은 의미로 불리기도 합니다. 용어적으로 분리가 명확하지 않은 이유는 JS 엔진이 브라우저 없이 독립적으로 실행(ex: Node.js)될 수 있는 반면, 렌더링 엔진은 그렇지 않기 때문 입니다.
* Rendering Engine 종류
WebKit
- 애플이 오픈소스로 개발하고 있는 웹 렌더링 엔진이고, HTML, CSS, JavaScript를 지원하도록 설계되었습니다. WebKit은 웹 애플리케이션을 개발하는 기업이 자체 개발을 해왔고, 대표적으로 Safari 브라우저, Chrome 브라우저(28 버전 이전), 안드로이드 기기용 브라우저 등에 WebKit 웹 렌더링 엔진을 사용해왔습니다.
Blink
- 구글이 Chrome 브라우저에서의 WebKit 지원을 중단하고, Chrome(28 버전) 부터는 WebKit을 기반으로 한 Blink라는 새로운 웹 렌더링 엔진을 적용했습니다.
Gecko
- FireFox 브라우저에서 사용중인 렌더링 엔진 입니다.
*Rendering Engine 동작 과정
- DOM 트리 구축을 위한 브라우저 렌더링 엔진이 HTML 문서를 Parsing
- CSSOM(CSS Object Model) 생성
- Render Tree 생성
화면에 표시 되어야 할 모든 노드의 컨텐츠와 스타일 정보를 포함하는 트리가 만들어집니다. - Layout [Reflow] (각 노드가 화면에 표시 되도록 배치)
뷰포트 내에서 객체들 위치와 크기를 계산하고 정리해줍니다. em은 px 단위로 변환 됩니다. - Painting [Repaint]
UI backend layer를 이용하여 렌더 트리의 배치된 각 노드를 화면의 픽셀로 나타냅니다
**DOM(Document Object Model 문서객체 모델) 소개
- 텍스트 파일로 만들어져 있는 웹 문서(HTML이나 XML문서)를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해 할 수 있는 구조로 메모리에 올려야 합니다. 브라우저 렌더링 엔진은 웹 문서를 브라우저가 이해 할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 합니다.
- DOM은 웹 페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 조작 할 수 있도록 API를 제공하는 일종의 인터페이스 입니다.
- DOM은 자바스크립트 객체로 제공 되고 웹 브라우저와 Javascript가 이해 할 수 있는 구조로 HTML parser가 DOM으로 바꿔줍니다.
Javascript Engine(JS Runtime)
- javascript 코드를 해석하고 실행 합니다.
- 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기)로 대체적으로 웹 브라우저에서 사용됩니다.
- 엔진에 의한 인터프리터 방식이므로 별도의 컴파일 과정이 필요 없습니다. (즉, 웹브라우저에서 즉시 해석되어 실행 = 런타임)
- 자바스크립트는 웹 브라우저뿐만 아니라 Node.js, Electron, React Native 등의 프로젝트와 그 밖의 다양한 곳에서 동작 합니다.
*Javascript Engine(JS Runtime) 종류
V8
자바스크립트 엔진의 대표적인 예로 C++로 작성되었으며, 구글이 개발한 오픈소스 입니다. V8 은 Chrome과 Node.js에서 사용 됩니다.
스파이더몽키(SpiderMonkey)
최초의 자바스크립트 엔진으로 Mozilla 재단에서 관리하고 FireFox에서 사용합니다.
Chakra
마이크로소프트가 개발한 엔진이며, Edge 브라우저에 되고 있습니다.
JavaScript Core
애플에서 개발한 JavaScriptCore는 처음에 WebKit 프레임워크를 위해 개발되었습니다.
최근에는 Safari와 React Native App에서 사용하고 있습니다.
Networking
- http 요청을 할 수 있으며 네티워크를 호출할 수 있습니다.
UI Backend
- 기본적인 위젯을 그리는 인터페이스
Data Storage
- Local Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용하여 저장하는 영역 입니다.
FE