http1.1 와 http2

NOTION에서 보기: https://www.notion.so/http-1-1-http-2-602c8b4333fe4d7683d77bd726270254

http/1.1 와 http/2

 

---

HTTP란?

• HTTP란 인터넷 상에서 데이터를 주고 받기 위한 클라이언트 서버 모델을 따르는 프로토콜로, WWW에서 하이퍼텍스트 문서를 교환하기 위해 사용되는 통신규약이다.
• TCP/IP프로토콜 위에서 동작한다.
• 포트 80번을 사용하여 통신한다.
• HTML 문서, 이미지, 동영상, 오디오 , 텍스트 문서 등 모든 종류의 데이터를 전송한다.
• 하이퍼텍스트 기반으로 데이터 전송한다. (= 링크 기반으로 데이터에 접속하겠다라는뜻)
• 첫 표준은 HTTP/1.1 이며 이후로 HTTP/2 HTTP/3이 등장했다.

💡 HTTP : Hypertext Transfer Protocal
     WWW : World Wide Web
    TCP/IP : TCP/IP프로토콜

HTTP/1.1 와 HTTP/2

http/1.1

동작방식

• 하나의 요청 > 하나의 응답
• 비연결지향 (요청한 후 응답받으면 연결을 끊어버림으로 서버의 부담을 줄임)
• 동시전송불가
• 요청과 응답이 순차적으로 이루어짐
• 다수의 리소스(이미지, css, script)를 처리하려면 요청할 리소스 개수에 비례해서 대기시간(Latency)이 길어짐

단점

• TCP, HTTP의 HOL Blocking
  ex ) 하나의 TCP연결에서 3개의 이미지를 얻으려고 하는경우 HTTP 요청순서
  이미지1 > 이미지2 > 이미지3

즉 전 이미지 응답처리 완료까지 대기해야하는 시간(Latency)이 생기는데 이와같은 현상을 HTTP의 HOB(Head of Line Blocking) 라고 부르며 파이프라이닝의 큰 문제점 중 하나이다.

• RTT 증가 = Round Trip Time 증가
  일반적으로 하나의 connection에 하나의 요청을 처리하기때문에 요청별로 connection을 만들게 된다.

TCP상에서 동작하는 HTTP의 특성 상 3-way Handshake가 반복적으로 일어나고 불필요한 RTT증가와 네트워크 지연을 초래하여 성능을 저하시킨다.

• 리소스를 요청한 후 응답 받으면 서버에 부담을 주지 않도록 요청을 끊어버리는 것이 특징이다. 하지만 리소스를 요청할 때마다 새롭게 연결해야하므로 오버헤드 비용이 발생한다.
• 무거운 Header구조 (* Cookie)매 요청시마다 중복된 header값을 전송하게 되며 해당 도메인에 설정된 쿠키 정보도 매 요청시마다 헤더에 포함되어 전송된다
• 따라서 간혹 전송하려는 값보다 헤더값이 더 큰 경우도 발생한다.
• http/1.1 의 헤더에는 많은 메타 정보들을 저장하고 있다.
• 비연결지향 / 무상태성 (stateless)
  각각의 요청은 독립적이라고 여겨지는 특성으로 서버는 클라이언트의 상태를 유지하지 않는다. 요청이 처리되면 연결이 끊어지기 때문에 클라이언트의 이전 상태를 알 수가 없다.

따라서 과거에 로그인을 해도 로그정보를 유지할 수 없어서 쿠키나 세션, 토큰방식의 OAuth, JWT가 사용된다.

 

단점 극복 방법

• Sprite Image사용
• Domain Sharding 도메인 샫
  요즘 브라우저들은 이 단점을 극복하기 위해 다수의 connection을 만들어 병렬로 요청을 보내기도 한다.
  하지만 도메인당 갯수제한이 존재한다. (크롬기준 6개)
• Minify CSS/Javascript
  http를 통해서 전송되는 데이터의 용량을 줄이기 위해 css, javascript 코드를 축소하여 적용하는 방식이다.
• Data URL Scheme
  Data URL Scheme은 html문서 내 이미지 리소스를 base64로 인코딩된 이미지 데이터로 직접 기술하는 방식이고 이를 통해 요청 수를 줄이는 방식이다.
• Load Faster
  스타일 시트를 html 문서 상위에 배치
  스크립트를 html 문서 하단에 배치
  참고:
  https://blog.hubspot.com/marketing/how-to-reduce-your-websites-page-speed
• SPDY 등장 (HTTP/2 전)
  구글이 HTTP고속화한 스피디라는 새 프로토콜을 구현함. HTTP 통한 전송을 재 정의하여 구현한 것. 하지만 근본적으로 문제해결이 되지 않아서 이걸 기반으로 HTTP/2가 나오게 되었다.

http/2

주요특징

• Multiplexed Streams 동시요청
  동시에 여러개 요청 > 여러개 응답
  한 커넥션으로 동시에 여러개의 메세지를 주고받을 수 있으며, 응답은 순서에 상관없이 계속해서 주고 받음
• Stream Prioritization 우선순위 설정
  만약 요청한 html문서안에 css파일 1개와 이미지 파일 2개가 존재하는데 css파일에서 이미지를 사용한다면,
  만약 이미지 파일보다 css 파일의 수신이 늦어지는 경우 브라우저의 렌더링이 늦어지는 문제가 발생하는데 이때 http/2은 리소스간 의존관계를 통하여 우선순위를 설정한다. 따라서 이러한 이슈를 해결한다.
• Header Compression 헤더 압축
  http/2는 헤더 정보를 압축하기 위해 header Table과 Huffman Encoding 기법을 사용하여 처리하는데 이를 HPACK 압축방식이라고 부른다.
  요청시마다 중복되는 HEADER를 검출하여 중복된 헤더는 index만 전송하고 중복되지 않은 헤더의 정보값만 Huffman Encoding 기법으로 인코딩 처리하여 전송한다.

 

참고:
https://developer.mozilla.org/ko/docs/Web/HTTP/Connection_management_in_HTTP_1.x
https://haerang94.tistory.com/207
https://medium.com/@shlee1353/http1-1-vs-http2-0-차이점-간단히-살펴보기-5727b7499b78
https://ijbgo.tistory.com/26
https://blog.hubspot.com/marketing/how-to-reduce-your-websites-page-speed