[TIL] http/1.1와 http/2 차이

https://www.cloudflare.com/learning/performance/http2-vs-http1.1/

위 아티클을 보고 정리한 내용입니다

 

 

요약 

1. http1.1 보다 http2가 더 빠르다
2. 이유 : 책으로 예를 들었을때,
   http1.1은 책을 나눠서 한장씩(혹은 좀 더 많이) 순서대로 하나 보내고 잘 받았으면 또 하나보내고 이런식이고
   http2는 챕터를 나눠서 챕터별로 번호를 매기고 한번에 다 보내면 받는쪽에서 조합해서 봄
3. 보내는 쪽에서 어느 부분이 중요한지 미리 정해놓으면 받는 쪽에서 그 부분을 먼저 페이지에 로드함
   
   

번역

what is HTTP? why is HTTP/2 faster than HTTP/1.1

 http란 무엇이고 왜 2가 1보다 빠른가?

http는 하이퍼텍스트 전송 프로토콜을 위한 표준이고, 대부분의 web application의 기본 프로토콜이다

더 구체적으로, http는 컴퓨터와 서버가 정보를 요청하고 보내는 방법이다

 

예를들어 누군가가 노트북으로 cloudflare.com을  찾을 때, 그들의 웹 브라우져는

페이지에 나타나는 콘텐츠에 대한 http request(요청)을 CloudFlare 서버로 보낸다.

 

그럼, CloudFlare 서버는  글자,이미지 그리고 브라우져가 유저에게 보여주고자 하는 포맷을 HTTP response(응답)으로 보낸다

 

What is HTTP/1.1?

첫번째로 사용 가능한 버전은 1997에 만들어졌다.
여러 개발 단계를 거쳐서, 이 첫 버전의 http는 HTTP1/1로 불려졌다
이 버전은 여전히 웹에서 사용중이다

what is HTTP/2?
2015년에 HTTP/2라고 불리는 새로운 버전의 http가 나왔다.

http2는 여러개의 1.1에서 예상치 못한 문제들을 해결했다.
특히 2버전은 더 빠르고 효과적이다
http2이 더 빠를 수 있는 방법들 중에 하나는
로딩 과정에서 콘텐츠의 우선순위를 정하는 것이다

 

What is prioritization?

웹 성능면에서 봤을때, 우선순위는 콘텐츠 조각이 로드되는 순서를 의미한다.

예를들어
유저가 새로운 웹사이트를 방문하여 아티클를 하나 본다고 했을 때,

그 아티클의 상단의 사진이 먼저 로드되어야할까?
글자가 먼저 로드되어야 할까?

광고 배너가 먼저 로드되어야 할까?

우선순위(Prioritization)는 웹페이지의 로드 시간에 영햐을 끼친다
예를 들어, 큰 javascript 파일같은 자원이 먼저 로드되면 로딩되는 중에는 나머지 페이지들을 막고있을 것이다.
만약 이러한 render-blocking 리소스들이 나중에 로드된다면 더 많은 페이지가 한번에 로드될 수 있다.

 

추가적으로, 이러한 페이지 자원들이 로드되는 순서는 영향을 미친다 어떻게 유저가 페이지 로드 시간을 인지하는지

만약 behind-the-scenes content ( CSS 파일 같은)나 유저가 바로 볼 수 없는 콘텐츠들이 첫번째로 로드된다면

유저는 페이지가 아얘 로드가 안된것으로 인식할 것이다.

만약 유저에게 가장 중요한 컨텐츠가 먼저 로드된다면, 가령 최상단의 이미지 같은 것들,

그럼 그 유저는 페이지가 빨리 로드되었다고 인지 할 것이다.

How does prioritization in HTTP/2 affect performance?

http2에서 개발자는 우선순위를 실무적이고 디테일하게 제어 할 수 있다.

이것은 그들에게  http1.1에서는 불가능했던 페이지 로드 속도를 극대화 해준다

 

http2는 가중치 우선순위라는것을 제공한다.

이것은 매순간 개발자들에게 어느 페이지가 먼저 로드 될 지 결정할 수 있도록 해준다

 

http2에서 고객이 웹페이지를 요청하면,
서버는 하나씩 보내지 않고 여러개의 데이터 스트림를 한번에 보낸다.

이 데이터 전송 방식은 멀티플렉싱으로 알려져있다.

 

개발자들은 이 각각의 데이터 스트림에 가중치를 줄 수 있고
그 가중치는 어느 데이터 스트림이 먼저 렌더링 되어야 하는지 클라이언트에 알려준다

 

앨리스가 밥이 쓴 소설을 읽고 싶다고 상상해보세요,

하지만 앨리스와 밥 둘다 보통의 메일로 소통할 수 있다.

 

엘리스가 밥에게 그의 소설을 보내 달라고 요청을 보냅니다.

밥은 http1.1 방식으로 편지를 보내기로 결정해요. 한번에 한 챕터씩 보냅니다.

그리고 다음 챕터는 그 전 챕터를 잘 받았다는 답장을 받은 후에 보내요

이런식이면 엘리스는 몇주가 지난 뒤에야 밥의 소설을 읽을 수 있어요

 

 

자 이제 밥이 http2를 사용한다고 상상해 봐요, 이 경우에
그는 소설의 각 챕터를 나눠서 보내요( 우편 서비스의 크기 제한에 맞추면서 )

 

하지만 전부 한번에 보내요. 그는 또한 각 챕터에 숫자를 매겨요 Chapter1, chpater2 이런식으로

 

이제 엘리스는 그 소설 전체를 한번에 받아요 그리고 조립 할 수 있어요 정확한 순서로 그녀 자신의 시간에 맞춰서

 

만약 한 챕터가 손실 되었다면, 그녀는 그 챕터만 다시 빠르게 요청할 꺼에요

이런 상황이 아니라면 과정은 완료될 꺼에요

 

그리고 엘리스는 몇일만에 소설을 읽을 수 있겠죠

 

http2에서는 밥이 여러개의 챕터를 한번에 보낸 것 처럼 데이터는 한번에 전부 보내집니다.

그리고 밥처럼, 개발자들은 챕터 번호를 http/2에서 얻어요. 

 

그들은  text가 먼저 로드 될지, css가 먼저 로드 될지, js가 먼저 로드 될지 혹은 ux에서 중요하다고 생각하는 무었이든지
먼저 로드되도록 결정 할 수있어요.

 

성능에 영향을 주는 http2와 http1.1사이의 다른 차이점은 무엇인가

 

multiplexing : http1.1은 순차적으로 로드한다,
그래서 하나의 자원이 로드될 수 없다면 그 뒤의 다른 모든 자원이 막힌다.

그것과 반대로 http2는 싱글 tcp 연결을 사용하여 여러개의 데이터 스트림을 한번에 보내는것이 가능하다 그래서 어느 자원도 다른 자원을 막지 않는다.

 

http2는 이것을 이진 코드 메세지 안에서 데이터를 나누고 이 메세지들에 숫자를 메김으로 처리한다 그래서 클라이언트가 어떤 스트림이 

어떤 바이너리 코드메세지를 포함하고 있는지 알게 한다

 

 

Server push : 일반적으로, 서버는 클라이언트가 그것을 요청했을 때만 콘텐츠를 제공한다.

그런데 이 접근법은  클라이언트가 요청해야하는 수십개의 분리된 리소스를 포함하는 현제  모던 웹페이지에서는 항상 실용적이진 않다,
http2는 클라이언트가 요청하기 전에 서버에서 클라이언트로 콘텐츠를 ’push’ 할 수 있도록 허용함으로 이 문제를 해결했다

그 서버는 또한 클라이언트가 push된 콘덴츠를  알게하는 메세지를 보낸다. 예상하기 위해서

즉 밥이 엘리스에게  전체 소설을 보내기 전에 콘텐츠 테이블(챕터 리스트같은거?) 을 보낸다고 보면된다

 

Header compression : 작은 파일들은 큰파일보다 더 빠르게 로드된다. 웹의 성능을 올리기 위해
http1.1, http2 둘다 http 메세지를 압축해서 보낸다. 그런데 http2는 ‘HPACK’ 이라고 불리는 더 발전된 압축 방법을 사용한다

이 방법은 헤더 패킷에 중복된 정보를 제거한다.
이것은 약간의 byte를 모든 http 패킷에서 제거한다 

 

 http패킷의 부피는 싱글 페이지 로딩에도 포함된다는점을 고려할 때, 이러한 작아진 byte가 여러개 쌓이기 때문에, 결과적으로 로딩이 빨라 질 것이다