http2(이하 h2)은 무엇이고 1.x 과 어떤 차이점이 있을까?
다음 사이트에 접속하면 h2와 http1.1 방식으로 각각 이미지를 다운 받게된다.
이 때, http1.1과 h2는 중 어떤게 더 빠를까? 아래 링크에 접속해서 직접 확인해보자
https://imagekit.io/demo/http2-vs-http1?utm_source=blog&utm_medium=blog&utm_campaign=Blog
HTTP/2 vs HTTP/1.1 - Performance Comparison
A performance comparison between images loaded over HTTP/2 and HTTP/1.1 via ImageKit.io
imagekit.io
인터넷 환경이 느린 상황이라면 확연히 차이가 날 것이다.
극한의 환경에서 테스트해보자.
크롬 개발자 도구의 네트워크 탭을 킨다.
Network 탭을 선택하고 위 사진의 Slow 3G 위치를 누른다. 별도 설정을 안해놨었다면 No throttling으로 되어 있을 것이다.
Slow 3G를 선택한다.
아래처럼 우클릭을 하여 Header Options-Protocol을 선택하면 Protocol 칼럼이 보인다
이 상태로 새로고침을 하면 확연한 차이를 느낄 수 있다.
다음 결과를 보고 차이점을 파악해보자.
h2 결과
http1.1 결과
제일 우측 Waterfall 항목을 보면 진행되는 양상이 다른 것을 볼 수 있다.
좀 더 자세히 살펴보자.
네트워크 탭 상단 부분에 다음과 같은 시간에 따른 그래프가 존재한다.
마우스를 위에 올리면 다음처럼 노란색 선이 생긴다.
마우스를 클릭하면 다음처럼 클릭된 시간대 근처의 네트워크 데이터만 보여준다.
클릭 외에도 드래그를 할 수도 있다. 드래그를 하면 드래그 된 시간에 해당하는 네트워크 내용을 보여준다.
앞 부분 시간대를 드래그해서 선택하면 다음과 같은 모습을 볼 수 있다. h2 인 경우에 초록색부분이 일괄적으로 시작되는 것을 볼 수 있다.
초록색 막대 바 쪽에 마우스를 올리면 다음처럼 표시가 된다. 이 중 Wating(TTFB)는 브라우저가 요청을 보내고 서버에서 첫 바이트를 받을 때까지 기다린 시간이다. 브라우저를 새로고침하고 2.07초가 지나서 해당 요청에 대한 첫 응답 바이트를 받은 것이다.
상단 탭에서 Protocol을 눌러 프로토콜로 정렬해서 살펴보자.
h2를 보면 Wating(TTFB) 가 다 동시에 시작하는 것을 볼 수 있다.
h1을 보면 동시에 시작하는 경우도 있지만 다 제각각인 경우가 더 많은 것을 볼 수 있다. 이것이 무언가 큰 차이를 일으키는 것으로 보인다.
이번 포스팅에서는 네트워크 탭을 통해서 h2와 http1.1의 현상을 파악하고 TTFB의 시작시점에서 차이점이 있는 것을 파악할 수 있었다.
이런 동작을 보면 병렬이라는 키워드를 예상해볼 수 있다. 다음 포스팅에서는 h2의 동작 원리에 대해서 정리해도록 하겠습니다.
참고자료
- https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation
- https://imagekit.io/blog/http2-vs-http1-performance/
