01. 브라우저 구조에 대해 간략히 설명해주세요.

브라우저 구조에 대해 간략히 공부해보자.

 

이미지 출처:  http://taligarsiel.com/Projects/howbrowserswork1.htm

 

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

사용자가 접근할 수 있는 모든 영역을 말한다.

즉, 페이지를 보여주는 창(사이트)을 제외한 나머지 모든 부분을 말한다.

ex: 주소표시줄, 이전이나 다음 혹은 새로고침 버튼등. 

user interface 예시 (네모박스를 제외한 모든 영역)

 

 

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

User Interface와 Rendering Engine 두 사이의 동작을 제어한다. (연결 부분이 된다.)

자료 저장소(Data Storage)를 참조하고 있어서 로컬에 데이터 저장 및 읽기 등의 작업을 할 수 있다.

 

 

3. Rendering Engine (렌더링 엔진)

웹 서버로 부터 받은 자원을 브라우저 상에 표시하기 위한 작업을 한다.

즉, *HTML과 CSS을 파싱하는 동작을 한다. (중요!)

 

- 크롬은 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지한다고 한다. (= 독립된 프로세스)

(크롬은 컴퓨터에서 사용하는 모든 탭, 플러그인 및 확장 프로그램에 대해 개별 프로세스를 생성하도록 설계되었다.)

별도의 프로세스

 

 

4. Networking (통신)

HTTP 요청과 같은 각종 네트워크 요청을 수행하는 부분이다.

 

 

5. Javascript Interpreter (or Javascript Engine ?) (자바스크립트 해석기) 

JS를 읽고 해석하고 실행하는 역할을 한다. (Chrome 같은 경우 V8엔진을 사용한다.)

 

 

6. UI Backend (or Display Backend) (UI 백엔드)

브라우저의 기본적인 위젯을 그리는 인터페이스이다.

ex: input, select, 

ui backend 예시

 

 

7. Data Persistance (자료 저장소)

브라우저 메모리(보조 기억 장치)를 사용하여 데이터를 저장하는 부분이다.

ex: LocalStorage, SessionStorage, Cookie...

 

 

 

---

더 깊은 내용에 대해 알고 싶거나, 참고한 글을 확인하고 싶다면!

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

http://taligarsiel.com/Projects/howbrowserswork1.htm