[web] 브라우저의 구조

✨브라우저의 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것

자원은 보통 HTML 문서지만 PDF, 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI에 의해 정해진다.

✨ 브라우저의 기본 구조

브라우저 주요 구성 요소 - https://d2.naver.com/helloworld/59361

사용자 인터페이스

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

크롬 사용자 인터페이스

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

렌더링 엔진

요청 받은 내용을 브라우저 화면에 표시하는 일을 한다.

 ex) HTML을 요청 시, HTML과 CSS를 파싱해 화면에 표시한다.

대표적으로 파이어폭스가 사용하는 게코Gecko, 사파리가 사용하는 Webkit, 크롬이 사용하는 Blink가 있다.

렌더링 엔진의 기본적인 동작 과정

통신

HTTP 요청과 같은 네트워크 호출에서 사용.

플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행된다.

UI 백엔드

Select 와 Input 같은 기본적인 위젯을 그리는 인터페이스.

플랫폼에서 명시하지않은 일반적인 인터페이스로 OS 사용자 인터페이스 체계를 사용한다.

자바스크립트 해석기

자바스크립트 코드를 해석하고 실행한다.

자바스크립트 엔진

자료 저장소

자료를 저장하는 계층

쿠키, 로컬 스토리지, 세션 스토리지 등 모든 자료를 저장하는 영역이다.

 

---

참고 자료

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