Browser의 동작

웹을 통해서 전달되는 데이터는 어딘가에서는 해석되어야 합니다.

서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳은 바로 browser입니다.

browser는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링 엔진이 포함되어있습니다.

이런 작업의 대부분은 브라우저 내부에서 이뤄지기 때문에 자세히 알 필요는 없지만

난해 난 문제나, 최적화된 웹 개발을 위해 공부합니다.

Browser components.

User Interface 화면에 보이는 버튼 같은 것들 내비게이션... 등등

Browser engine html 소스코드를 실행해서 화면에 보여줄 수 있는 엔진

Rendering engine 화면에 직접 위치를 잡고 색칠을 해주는 엔진 그래서 픽셀 단위로 그려져 눈으로 볼 수 있다.

Data Persistence 브라우저가 관리하는 데이터 영역

Networking http를 통해 웹서버로 통신

JavaScript Interpreter 자바스크립트 코드를 해석할 수 있는 해석기

UI Backend ui영역을 처리할 수 있는 벡엔드 영역

1. Parsing HTML to construct the DOM tree

HTML을 문자 단위로 해석을 한 뒤 데이터 객체로 구조화시키되 트리 구조의 형태로 태그들을 트리 형태로 가지고 있게 됩니다.

2.Render tree construction

렌더 트리를 만듭니다.

3. Layout of the render tree

렌더 트리를 기준으로 css를 합쳐 스타일 정보와 구조를 합쳐 매칭 합니다.

4. Painting the render tree

화면에 그림을 그립니다.

브라우저는 웹에서 정보를 검색, 표현, 탐색하기 위한 소프트웨어입니다.

인터넷에서 웹페이지를 요청하는 URL이 있고 서버와 HTTP로 정보를 주고받을 수 있는 네트워크 모듈도 포함되어 있습니다. 서버에서 받은 문서들을 해석하고 실행하여 화면에 표현하기 위한 인터프리터들도 가지고 있습니다.

밑의 그림은 가장 대표적인 내용입니다.

HTML을 해석을 해 트리 모양의 DOM(document object model) tree를 만들고, css를 해석해 css tree를 만듭니다.

이 과정에서 해석하기 위한 파싱 과정이 필요하며 토큰 단위로 해석되는 방식은 일반적인 소스코드의 컴파일 과정이라고 보아도 됩니다.

DOM TREE와 CSS TREE는 RENDER TREE로 Attachment 됩니다.

이렇게 조합된 결과는 화면에 어떻게 어디에 배치될지 정보를 가지고 있으며 Render Tree정보를 통해 Paint을 하여 우리의 눈에 보이게 됩니다.