[브라우저] 브라우저의 구조

◆ 브라우저란?

선택한 자원을 서버에 요청하고, 전송 받은 자원을 사용자에게 표시해주는 tool이다.

※ 전송 받은 자원 : HTML, CSS, Javascript, PDF, Image, WASM 등등

 

- 좀 더 구체적으로 설명하자면,

1. 사용자 인터페이스 영역의 주소창에서 URI(Unified Resource Identifier : 자원 식별자)를 입력한다.

2. 네트워킹 모듈을 통해 HTTP 요청을 보내고, 응답을 받는다.(응답은 자원을 포함한다.)

3. 전송받은 자원은 렌더링 엔진을 통해서 사용자에게 볼 수 있는 형태의 오브젝트로 변환된다.(렌더링)

- 브라우저 엔진은 이 때 전송받은 자원을 렌더링 엔진으로 넘겨주는 역할을 한다.

* 필요한 경우 자바스크립트 해석기를 통해 자바스크립트 코드를 해석하고 실행한다.

4. 오브젝트는  UI 백엔드를 통해 화면에 뿌려진다.

* 보이지 않는 데이터는 데이터 저장소(Cookie, Local Storage 등)에 저장된다.

 

■ 브라우저 구성요소

● 사용자 인터페이스, 네트워크 모듈, 렌더링 엔진, 브라우저 엔진, 자바스크립트엔진(해석기), UI 백엔드, 데이터 저장소

 

간략하게 각각의 역할에 대해서 알아보면 아래와 같다.

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

사용자가 요청한 사이트 외에 '주소창', 뒤로가기, 앞으로 가기, 새로고침, 북마크 등 브라우저가 유저와 상호작용하는 접점.

■ 브라우저 엔진

UI와 렌더링 엔진 사이의 동작을 제어한다.

- 브라우저라는 프로그램의 비즈니스 로직이 담기며, Data Storage를 참조하여 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다.

 

■ 렌더링 엔진 ★★★★

요청한 자원을 브라우저에 표현할 수 있는 형태로 변환하는 작업을 진행한다. HTML, CSS, XML 등을 파싱하고 화면에 표시한다. 

- 크롬, 오페라, 웨일 브라우저 : Blink(Webkit기반) -크로미움.

- IE : Trident

- Firefox : Gecko

- Safari : Webkit (iOS는 모든 브라우저가 Webkit기반이다.)

...

브라우저 엔진이 유사하면, 동작 방식이 유사하다.

 

■ 자바스크립트 해석기(= 자바스크립트 엔진)

자바스크립트 코드를 해석하고 실행한다. 렌더링 엔진이 자원을 읽는 도중 <script>태그를 만나면 동작한다.

■ UI Backend

브라우저가 이미 갖고 있는 UI를 그려주는 역할을 한다. select/input 등 기본적인 위젯을 그리며 OS UI 체계를 사용한다.(OS마다 다르다.)

■ Networking(= 통신 모듈)

HTTP 요청과 같은 네트워크 호출에 사용된다. 플랫폼 독립적인 인터페이스이고, 각 플랫폼의 하부에서 실행된다.

* 플랫폼 독립적 : 안드로이드, Window, IOS에 의존하지 않고 동작한다.

* 개발자도구의 네트워크에서 각 요청과 응답을 확인할 수 있다.

 

■ 데이터 저장소

Cookie, Local Storage, Indexed DB 등 브라우저 메모리를 활용해 저장하는 영역이다.

* 개발자 도구의 애플리케이션에서 확인 가능하다. 

 

 

* 브라우저에서 렌더링엔진이 가장 중요하다고 한다. 실제로 HTML 파일을 파싱하는 부분이니까요.

다음 글에서는 렌더링 엔진의 동작 방식에 대해서 살펴봐야겠습니다.