[HTML/CSS] 브라우저

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

브라우저

브라우저는 웹 서버에서 양방향으로 통신하며 HTML 문서 및 그림, 멀티미디어 등의 컨턴츠를 열람할 수 있게 해주는 GUI기반의 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신합니다

웹

웹은 World Wide Web이 풀 네임이며, 인터넷 상에서 텍스트나, 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼 텍스트 방식으로 연결해 제공합니다. HTML 언어를 사용하여 작성된 문서 형태로 제공되며, 이러한 문서들은 웹 페이지 라고 합니다.

웹 브라우저의 종류

최초의 그래픽 웹 브라우저는 1993년 미국의 일리노이 대학을 다니던 마크 안드레센과 에릭 비나가 개발한 모자익입니다. 모자익은 기존의 텍스트 위주의 브라우저가 아닌 이미지를 표시할수 있는 최고의 그래픽 웹 브라우저였습니다.

 

현재는 크롬이 압도적인 점유율을 갖고 있습니다. 크롬 뿐만아니라 사파리, 오페라, 엣지, 파이어폭스 등 다양한 웹 브라우저들이 존재합니다.

브라우저의 특징과 웹의 동작 원리

위에서 본것  처럼  세상에는 다양한 브라우저들이 많습니다. 이들은 분명 다르지만 동작 원리는 같습니다.

브라우저는 사용자가 선택한 자원을 서버에 요청하고, 서버의 응답을 브라우저에 띄우는 방식으로 동작합니다.

자원은 보통 HTML 문서, PDF, 멀티미디어 등의 형태일 수 있으며, 자원의 주소는 URI로 되어 있다.

 

1.  사용자가 웹  브라우저를 통해 찾고 싶은 웹 페이지의 URI 주소를 입력한다
2. DNS 서버에서 사용자가 입력한 URL 주소중 도메인 이름을 검색한다
3. 도메인 이름에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정볼와 함께 전달한다
4. 웹페이지의 정보와 전달받은 IP주소는 HTTP 프로토콜을 사용해 HTTP 요청 메세지를 생성하고, 생성한 메세지는 TCP 프로토콜을 사용해 인터넷을 거처 해당 IP컴퓨터로 전송된다.
5. 요청 메세지는 다시 HTTP프로토콜을 통해 웹 페이지 URL 정보로 변환된다.
6. 웹 서버는 이 변환된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤 HTTP프로토콜을 통해 HTTP 응답메세지를 생성하고 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송된다.
7. 사용자 컴퓨터에 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환되고, 변환된 데이터는 웹 브라우저 상에 출력되 사용자가 볼 수 있게 된다.

브라우저 구조

사용자 인터페이스

UI라고 부르며 유저와 가장 밀접하게 맞닿는 부분입니다.

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭하고 있습니다.

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어 합니다. 브라우저 엔진의 준된 역할은 HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 시각적 표현으로 변환 시키고, 문서 객체 모델 자료 구조를 구현합니다.

렌더링 엔진 

요청한콘텐츠를 환면에 출력하는 역할을 합니다. HTML, CSS 등을 파싱해 최종적으로 화면에 그려주며, 렌더링 엔진은 HML 및 XML 문서와 이미지를 표시할 수 있습니다

통신

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

자바스크립트 해석기

여러 목적으로 사용되지만 대체적으로 웹 브라우저에서 이용이 되며 브러우저마다 전용 엔진이 탑제되어 있습니다.

모두들 자주 사용하는 크롬은 V8엔진이 탑제되어 있습니다.

V8 엔진의 메모리 구조는 Heep Memory와 Call Stack으로 구성되어 있습니다.

> Heep Memory

힙은 동적으로 메모리 할당에 사용되는 자료구조 입니다.

힙을 이용하여 V8은 객체 또는 동적 데이터를 저장 합니다

> Call Stack

콜 스택은 한 번에 하나의 작업만 할수 있습니다.

콜스택은 프로그램 상에서 우리가 어디에 있는지 기록하는 자료 구조 입니다.

후입선출의 구조를 가집니다.

함수가 실행된다면, 해당함수는 콜스택 가장 상단에 위치하고, 실행이 종료되면 가장 위에 있는 함수인 본인을 제거합니다.