Frontend - 브라우저의 주요 컴포넌트들

브라우저 컴포넌트 그래프

 

1. User Interface

2. Browser Engine

3. Rendering Engine

4. Data Persistance/Storage

5. Networking

6. JavaScript Interpreter

7. UI Backend

 

---

[ 1. User Interface ]

 

사용자 인터페이스

 

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창 의외의 모든 부분

 

[ 2. Browser Engine ]

 

브라우저 엔진

 

사용자 인터페이스와 렌더링 엔진 중간에서 두 컴포넌트 사이의 동작을 제어

 

[ 3. Rendering Engine ]

 

요청한 데이터를 출력. 얻은 문서를 HTML 파서를 통해 DOM 트리를 만들고 CSS 파서로 알아낸 스타일 규칙을 붙여(attachment) 렌더 트리를 생성

 

[ 4. Data Persistance/Storage ]

 

자료 저장소

 

브라우저가 설치되면 컴퓨터의 로컬 드라이브(ex: 하드 디스크)에 생성되는 작은 데이터베이스이다. 캐시, 쿠키, 북마크, preferences와 같은 데이터를 관리할 수 있게 한다.

 

브라우저는 localStorage, IndexDB, WebSQL, FileSystem 과 같은 저장 매커니즘을 지원.

 

[ 5. Networking ]

 

HTTP 요청과 같은 네트워크 호출에 사용됩니다. 인터넷 통신과 보안에 관한 측면을 담당

 

네트워크 트래픽을 줄이기 위해 전송받은 문서에 관한 캐시를 설치할수도 있다.

 

플랫폼에 독립적인 인터페이스.

 

[ 6. JavaScript Interpreter ]

 

브라우저에 내장된 자바스크립트 코드를 해석하는 컴포넌트.

 

해석된 코드는 출력을 위해 렌더링 엔진에 전달

 

[ 7. UI Backend ]

 

콤포 박스, 창(윈도우)과 같은 기본적인 위젯을 그리는데 사용

 

플랫폼에 독립적인 인터페이스를 제공하고 내부에서 OS 사용자 인터페이스 메소드를 사용.

 

---

[ 출처 ]

https://d2.naver.com/helloworld/59361

https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509