HTTP2

HTTP/1.1의 단점

HOL(Head Of Line) Blocking

HTTP/1.1은 위의 그림과 같이 기본적으로 하나의 연결에 하나의 요청을 처리하도록 설계되어 있습니다. 그래서 동시 전송이 불가능하고 요청과 응답이 순차적으로 이루어지게 됩니다. 그렇다보니 HTTP 문서 안에 포함된 다수의 리소스를 처리하려면 요청할 리소스 개수에 비례해서 대기 시간이 길어지게 됩니다. 그리고 아래의 그림과 같이 여러 번의 요청을 했을 때, 앞선 요청에 문제가 있어서 응답이 늦어지면 다음 응답도 같이 늦어진다는 문제점도 발생합니다.

RTT(Rount Trip Time)증가

앞서 말한 것처럼 HTTP/1.1의 경우 하나의 연결에 하나의 요청을 처리합니다. 이렇다 보니 매번 요청을 할 때마다 새로 연결을 만들게 되고 TCP 상에서 동작하는 HTTP의 특성상 3-way Handshake가 반복적으로 일어나고 또한 불필요한 RTT 증가와 네트워크 지연을 초래하여 성능을 저하시키게 됩니다.

무거운 Header 구조

HTTP 헤더에는 많은 정보가 있는데, 그 중 쿠키는 매번 요청시 마다 헤더에 담겨 전송됩니다. 간혹 HTTP 바디에 담겨있는 내용보다 쿠키로 인해 헤더가 더 큰 경우도 존재합니다. User-Agent 정보만 해도 120Byte가 넘어갑니다.

HTTP/1.1의 개선

Image Spriting

 웹 페이지를 보면 수 많은 아이콘과 이미지들이 나옵니다. 이런 이미지들을 각각 요청해서 받는다면 RTT의 증가와 HOL Blocking 이슈가 발생할 수 있습니다. 이를 보완하기 위해 아이콘이나 이미지를 하나의 큰 이미지로 만들어 CSS에서 이미지 좌표로 지정해 표시합니다.

Domain Sharding

HTTP/1.1에서 하나의 연결에 하나의 리소스만 받아오는 단점을 극복하기 위해 브라우저에서 여러 개의 연결을 생성해 요청을 보내기도 합니다. 하지만 Domain당 연결이 제한적입니다. 그리고 이것은 HTTP/1.1의 근본적인 해결책이 되지 못 합니다.

Minify CSS/Javascript

서버에서 클라이언트로 리소스의 용량을 줄이기 위해 CSS나 JavaScript 코드를 최소화 합니다.

Data URI Scheme

HTML 문서 내에 이미지 리소스를 Base64로 인코딩된 데이터로 직접 기술하는 바익으로 이를 통해 HTTP 요청을 줄입니다.

Loadeer Faster

CSS는 HTML 상단에 JavaScript는 HTML 하단에 배치하여 로딩 속도를 높입니다.

HTTP2

HTTP2는 이러한 단점들을 개선하기 위해 나타난 기술입니다. 다만 새로운 프로토콜을 만든 것이 아니라 HTTP/1.1에서 성능을 집중적으로 개선한 것입니다. HTTP2의 초점은 성능에 있으며 브라우저에서 웹 사이트로의 단일 연결을 허용하는 것을 목표로 만들어졌습니다. HTTP2가 어떤 방식으로 성능을 향상시키고 있는지 주요 요소에 대해 확인해 보겠습니다.

Header Compression

HTTP2는 HTTP/1.1의 단점인 무거운 헤더 정보를 개선하기 위해 HashTable과 Huffman Encoding 기법을 사용해 헤더 크기를 줄입니다. 이런 압축 방식을 HPACK이라고 부릅니다. 위 그림처럼 클라이언트가 두 번의 요청을 보낸다고 가정하면 HTTP/1.1의 경우 두 개의 요청 Header에 중복된 값이 존재해도 그냥 중복 전송합니다. 하지만 HTTP2 에서는 Header에 중복 값이 존재하는 경우 Static/Dynamic Header Table 개념을 사용하여 중복 Header를 검출하고 중복된 Header는 index 값만 전송하고 중복되지 않은 Header의 정보 값은 Huffman Encoding 기법으로 인코딩하여 전송합니다.

Multiplexed Streams

HTTP2는 하나의 연결에 여러 개의 메시지를 전달 받게 되며 순서에 상관 없이 Stream으로 받을 수 있습니다.

Server Push

서버는 클라이언트가 요청하지 않은 리소스를 임의로 보내줄 수 있습니다. 예를 들어 HTML 문서를 요청 했을 때, 그 문서가 렌더링 되기 위해 필요한 리소스들(이미지, css, script등)이 있습니다. HTTP/1.1에서는 HTML 문서를 받은 후 클라이언트가 재요청을 하게 됩니다. 하지만 HTTP2에서는 서버가 미리 필요로 하는 리소스들을 보내주게 되는 것입니다. 이를 PUSH_PROMISE라고 하며 서버가 보내준 리소스에 대해서는 클라이언트가 다시 요청하지 않습니다.

Stream Priority

리소스 간의 우선 순위를 지정할 수 있습니다. 이는 script보다 css를 먼저 받을 수 있도록 지정하여 화면 렌더링을 좀 더 빠르게 할 수 있다는 장점이 있습니다.