2일차 - HTTP와 브라우저

 

 

1일차에 이어 2일차 또한 기초상식인

HTTP와 브라우저에 대해 알아보려고 한다

 

---

1. HTTP란 무엇일까?

facebook 주소

HTTP는 자세히 알지는 못하더라도 아마 인터넷을

이용해 본 사람이라면 어딘가 낯이 익을 것이다

어떤 사이트에 접속하던간에 주소링크 앞에

붙어있는 모습을 볼 수 있다

 

HTTP는 Hyper Text Transfer Protocol의 약자로

인터넷에서 데이터를 주고받을 수 있는 프로토콜이다

 

이때 프로토콜은 쉽게 말해 시스템끼리 통신을

주고받을 수 있게 해주는 통신 규칙이라고 할 수 있다

 

덧붙여 http의 특징에 대해서도 찾아보았다

 

---

(1) Request와 Response

HTTP는 연결을 유지하지 않는 프로토콜이기 때문에

요청(request)과 응답(response)하는 방식으로 동작하게 된다

 

client가 서버에 요청을 보내면 요청을 받은

서버쪽에서 응답을 보내주는 방식인 것이다

 

(2) Stateless

HTTP는 독립적이고 무상태적인 통신으로

이전의 상태나 정보를 따로 저장하지 않는다

 

따라서 쓸데없는 자원을 낭비하지 않고 처리속도가 빠르지만

매번 요청할 때마다 정보를 보내야 하는 번거로움이 있다

 

이를 해결하기 위해 나온 것이 바로 쿠키와 세션이다

HTTP는 브라우저 단에 쿠키로 정보를 저장하고

세션은 서버 단에 저장하게 된다

 

쿠키보다는 서버 단에 저장되는 세션이

보안성이 높지만 완벽하다고 볼 수는 없다

 

---

2. 브라우저란?

브라우저는 웹페이지, 이미지, 비디오 등의

콘텐츠를 수신전송 및 표현하는 소프트웨어다

 

위 그림과 같이 우리가 평소에 인터넷에 접속하기 위해

사용하는 크롬, 사파리 , 엣지, 파이어폭스가 이에 해당된다

 

브라우저는 서버로부터 데이터를 전송받아

텍스트, 이미지 등으로 변환하게 되는데

이때 등장하는 것이 바로 HTML이다

 

HTML은 추후에 다룰 예정이다

---

클라이언트가 웹브라우저에 요청을 하게 되면

웹브라우저는 웹서버에 요청을 하게 된다

 

이때 요청 받은 우베서버는 브라우저에서

넘긴 HTML코드 읽어들여 해석한 후

클라이언트에게 보여지게 된다

 

---

3. 브라우저 구조

 

 

• User Interface : 주소 표시줄, 북마크 등 사용자에게 보여지는 부분
• Browser engine : UI와 렌더링엔진 사이의 동작을 제어를 담당함
• Rendering engine : HTML/CSS를 파싱하고 해석해웹서버로부터 요청받은 내용을 UI상에 표시함
• networking : 서버와의 통신을 담당함
• javaScript Interpreter : 자바스크립트 코드를 파싱하고 실행하는 해석기
• UI Backend :  OS 사용자 인터페이스 체계를 사용 UI를 구동 가능하게 해줌
• Data Persistense : 쿠키와 같은 로컬데이터를 저장하는 자료저장소

 

*웹브라우저는 위와 같은 구조로 이루어져 있다*

 

---

4. 브라우저 동작원리 

 

1) HTML 파싱 후에 돔 트리

2) 렌더 트리 구축

3) 렌더 트리 배치

4) 렌더 트리 그리기

 

브라우저의 핵심기능은 사용자가 원하는 페이지를

서버에 요청하고 서버의 응답을 받아 다시 표시한다

이것을 중요 렌더링 경로라고 부른다

 

과정이 이해되지 않을 수 있기 때문에

아래의 그림을 통해 조금 더 자세히 살펴보자

 

 

먼저 서버에서 응답받은 HTML을 ⒧파싱해

각 태그들로 DOM 트리를 구성한다

CSS도 스타일 규칙에 맞게 파싱한 후

위 둘을 결합해 ⑵렌더 트리를 생성한다

 

렌더트리가 생성되면 ⑶배치가 시작되는데

최종적으로 화면에 paint, 즉 출력하게 된다

 

위에 설명한 모든 동작들은 렌더링엔진에서 이루어진다

 

 

⒧ 파싱 :  브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

⑵ 렌더 트리 :  DOM과 CSSOM을 결합해 최종적으로 브라우저에 표기될 것을 골라 생성됨

⑶ 배치 : 각 노드가 화면의 정확한 위치에 표시되는 것을 의미함

---

 

참고 문서

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks

https://ko.wikipedia.org/wiki/HTTP

HTTP - 위키백과, 우리 모두의 백과사전

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

How browsers work