본문 바로가기
FRONTEND

HTTP 1.1 vs HTTP 2.0

by 드로니뚜벅이 2022. 4. 21.

HTTP 1.1과 HTTP 2.0의 가장 큰 차이는 속도입니다. HTTP 2.0은 헤더를 압축해서 보내고 한번의 연결로 동시에 에러 메시지를 주고 받을 수 있습니다.

 

HTTP 1.1

1) Connection 한 개당 하나의 요청을 처리하도록 설계되었습니다.

  • 동시에 리소스를 주고 받는 것이 불가능합니다.
  • 요청과 응답이 순차적으로 이루어집니다.
  • HTTP문서 내에 포함된 다수의 리소스(css, script, image)를 처리하려면 요청할 리소스 개수에 비례하여 Latency가 길어집니다.

2) HOL(Head of Line) 블로킹(Blocking)이 발생할 수 있습니다.

  • 네트워크에서 같은 큐에 있는 패킷이 첫 번째 패킷에 의해 지연될 때 발생하는 성능 저하 현상

3) RTT(Round Trip Time) 이 증가합니다.

  • Connection 하나에 요청 한 개를 처리하는 특성때문에 매번 요청 별로 Connection을 만들게 되고 TCP상에서 동작하는 HTTP의 특성상 3-way 핸드쉐이크가 반복적으로 일어나며, 불필요한 RTT 증가와 네트워크 지연을 초래하여 성능을 지연시킵니다.

4) 무거운 헤더 구조를 가지고 있습니다.

  • 매 요청마다 중복된 헤더 값을 전송하게 되며, 서버 도메인에 관련된 쿠키 정보도 헤더와 함께 포함되어 전송됩니다. 이러한 반복적인 헤더 전송과 쿠키 정보로 인해 헤더 크기가 증가합니다.

 

HTTP 1.1 개선 방안

1) Image Spriting

  • 웹 페이지를 구성하는 다양한 아이콘 이미지 파일의 요청 회수를 줄이기 위해 아이콘을 하나의 큰 이미지로 만든 다음 CSS에서 해당 이미지의 좌표 값을 지정하여 표시하는 방법입니다.

2) Domain Sharing

  • 브러우저들이 HTTP 1.1의 단점을 극복하기 위해 여러 개의 Connection을 생성해서 병렬로 요청을 보내기도 합니다. 하지만 브라우저 별로 도메인당 Connection 개수 제한이 존재하기 때문에 근복적인 해결은 어렵습니다.

3) Minified CSS/Javascript

  • HTTP를 통해 전송되는 데이터의 용량을 줄이기 위해 CSS, Javascript를 축소합니다.

4) Load Faster

  • 헤더 태그에 자바 스크립트를 삽입하고 async나 defer 옵션을 사용해 브라우저의 파싱을 block하지 않고 로드합니다.

5) Data URI Scheme

  • HTML 문서 내 이미지 리소스를 Base64 인코딩된 이미지 데이터로 직접 기술하는 방법으로 서버로의 요청을 줄입니다.

6) 구글의 SPDY

  • 위에서 언급된 내용만으로 근본적인 단점을 해결을 할 수 없었습니다. 그래서 구글은 더 빠른 앱을 실행하기 위해 Throughtput 관점이 아닌 Latency 관점에서 HTTP를 고속화한 SPDY라 불리는 새로운 프로토콜을 구현했습니다.

 

HTTP 2.0 (HTTP/2)

HTTP/2는 Hypertext Transfer Protocol Version 2의 약자로서, 2015년 IETF에 의해 공식적으로 발표된 HTTP/1.1(기존 표준)의 차기 버전입니다. 위에서 언급했던 SPDY 라는 구글의 비표준 개방형 네트워크 프로토콜에 기반으로 하고 기존의 HTTP methods, status codes, semantics 개념들이 동일하게 호환됩니다.

즉, HTTP 1.1을 완전하게 재작성한 것이 아니라 프로토콜의 성능에 초점을 맞춰 수정한 버전이라고 생각하면 됩니다. 특히 엔드유저가 느끼는 Latency나 네트워크, 서버 리소스 사용량 등과 같은 성능 위주로 개선되었습니다.

1) Multiplexed Streams

  • Connection 한 개로 동시에 여러 개의 메시지를 주고 받을 수 있으며 응답은 순서에 상관없이 스트림으로 주고 받는다.

2) Stream Prioritization

  • 리소스 간의 의존관계에 따른 우선순위를 설정하여 리소스 로드 문제를 해결합니다.
  • 클라이언트가 요청하지 않은 리소스를 서버가 사전에 푸시를 통해 전송할 수 있다. (Server Push)

3) Header Compression

  • 헤더 정보를 HPACK 방식으로 압축합니다.
  • 클라이언트가 요청을 두 번 보내더라도 Static/Dynamic Header Table 개념을 이용하여 중복을 검출해 내고 해당 테이블에서의 index값 + 중복되지 않은 Header 정보를 Huffman Encoding 방식으로 인코딩한 데이터를 전송한다.

 

참고 사이트