http 1.1의 문제점
1) HOLB (Head Of Line Blocking) - 특정 응답의 지연
HTTP/1.1의 경우 기본적으로 connection당 하나의 요청을 처리하도록 설계되어 있기 때문에 HOL Blocking이 발생할 수 있습니다.
HOL (Head-Of-Line) 블로킹이란 네트워크에서 같은 큐에 있는 패킷이 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 현상을 말합니다.
웹 환경에서의 HOL 블로킹은 패킷 처리 속도 지연 뿐만 아니라 최악의 경우 패킷 드랍까지 발생할 수 있습니다.
=> HTTP/1.1의 connection당 하나의 요청 처리를 개선할 수 있는 기법 중 pipelining(connection을 통해서 다수개의 파일을 요청/응답받을 수 있는 기법)이 존재
* 하지만, 이 또한 처음의 요청에 대한 응답이 오래 걸리는 경우, 그 다음 응답까지의 시간이 지연되는 현상이 발생합니다.
2) 무겁고 중복 많은 헤더 구조
HTTP/1.1의 헤더에는 많은 메타 정보들이 저장되어 있습니다. 클라이언트가 서버로 보내는 HTTP 요청은 매 요청마다 중중복된 헤더 값을 전송하게 되며 서버 도메인에 관련된 쿠키 정보도 헤더에 함께 포함되어 전송된다.
이러한 반복적인 헤더 전송, 쿠키정보로 인한 헤더 크기 증가가 HTTP/1.1의 단점입니다.
http 2가 나오기 전의 단점 극복 방법
1) Image spriting
웹 페이지를 구성하는 다양한 아이콘 이미지 파일의 요청 횟수를 줄이기 위해 아이콘을 하나의 큰 이미지로 만든 다음 CSS에서 해당 이미지의 좌표 값을 지정하여 표시
2) 도메인 샤딩
HTTP/1.1은 하나의 도메인에 하나의 connection만을 맺을 수 있습니다.
이런 단점을 극복하고자, 서버는 같지만, 도메인명을 여러개 설정해서 이를 리소스 주소로 내려주면, 한 브라우저에서 여러 개의 connection을 맺을 수 있게 됩니다. 이렇게 되면, 리소스를 병렬적으로, 동시다발적으로 받을 수 있게 됩니다.
하지만, 너무 많은 도메인을 연결하는 경우, DNS 검색과 TCP handshake에서 발생하는 시간 때문에 역효과가 날 수도 있다고 합니다.
3)css, javascript 이미지 압축
HTTP를 통해 전송되는 데이터의 용량을 줄이기 위해서 CSS, Javascript를 축소해서 적용합니다.
name.min.js , name.min.css 등이 그 예입니다.
4) data URI 스키마
// data url
<img src="data:image/png;base64, ....."/>
// image file
<img src="./1.png">HTML 문서 내에 이미지 리소스를 Base64로 인코딩된 이미지 데이터로 직접 기술하는 방법으로 이를 이용하여 서버로의 요청을 줄이는 방식입니다.
http 2의 등장!
http 2의 주요 특징들
1) 멀티 플렉싱
HTTP/2는 multiplexed Streams를 이용하여 Connection 한 개로 동시에 여러 개의 메시지를 주고 받을 수 있으며 응답은 요청 순서에 상관없이 stream으로 주고 받을 수 있습니다. HTTP/1.1의 Connection Keep-Alive, Pipelining의 개선 버전으로 보면 됩니다.
2) steam priorization
클라이언트가 요청한 HTML문서 안에 CSS파일 1개와 Image파일 2개가 존재하고 이를 클라이언트가 각각 요청하고 난 후 Image파일보다 CSS파일의 수신이 늦어지는 경우 브라우저의 렌더링이 늦어지는 문제가 발생하는데 HTTP/2의 경우 리소스간 의존관계(우선순위)를 설정하여 이런 문제를 해결
* 각 스트림에 가중치를 할당해서 우선순위를 결정합니다.
3) 서버 푸시
클라이언트(브라우저)가 HTML문서를 요청하고 해당 HTML에 여러 개의 리소스(CSS, Image...) 가 포함되어 있는 경우 HTTP/1.1에서 클라이언트는 요청한 HTML문서를 수신한 후 HTML문서를 해석하면서 필요한 리소스를 재 요청하는 반면,
HTTP/2에서는 Server Push기법을 통해서 클라이언트가 요청하지 않은 (HTML문서에 포함된) 리소스도 Push 해주는 방법으로 클라이언트의 요청을 최소화 해서 성능 향상을 이끌어 냅니다.
4) 헤더 압축
HTTP/2는 헤더 정보를 압축하기 위해서 Header Table과 Huffman Encoding 기법을 사용해서 처리하는데 이를 HPACK 압축방식이라고 부르며 별도의 명세서(RFC 7531)로 관리하고 있습니다.
위 그림처럼 클라이언트가 두번의 요청을 보낸다고 가정할 때 HTTP/1.x의 경우 헤더 중복이 발생해도 중복 전송합니다. 하지만 HTTP/2에서는 헤더에 중복이 있는 경우 Static/Dynamic Header Table 개념을 이용해서 중복을 검출해내고 해당 테이블에서의 index 값 + 중복되지 않은 Header 정보를 Huffman Encoding 방식으로 인코딩한 데이터를 전송합니다.
마무리.
HTTP(Hypertext Transfer Protocol)는 월드 와이드 웹 (World Wide Web)의 데이터 통신의 기초가 되는 응용 프로그램 프로토콜입니다.
간단하고 추상적인 예는 레스토랑 손님과 웨이터가 될 것입니다. 게스트(클라이언트)가 웨이터에게(서버)에게 식사를 요청하면 (웨이터 (응용 프로그램 논리)) 식사를 게스트에게 가져옵니다.
HTTP1.x 대신 HTTP2.0만 사용해도 아래 그림과 같이 응답속도(식사를 게스트에게 가져오는 속도)가 15~50%정도 향상됩니다.
참고, 출처:
https://seokbeomkim.github.io/posts/http1-http2/
https://jaeho214.tistory.com/32
https://lalwr.blogspot.com/2019/01/http1-vs-http2.html
https://mygumi.tistory.com/282
'엘리스 ai 트랙 > FE' 카테고리의 다른 글
| Javascript - ES11 ( ES2020 )의 특징들 (0) | 2022.04.04 |
|---|---|
| CI와 CD (0) | 2022.03.31 |
| HTTP (0) | 2022.03.13 |
| 기본값+rest+spread (0) | 2022.03.07 |
| 구조분해할당 (0) | 2022.03.07 |