[#1 Http1.1 vs Http2.0] Chrome + Img 10, 50, 100/ TTFB(firtst&last)

[ 교수님 피드백 이후 나아가는 방향 정리]

1) 이미지 받기 10개, 50개, 100개 : Chrome 브라우저에서 TTFB(first & last)

2) 이미지 업로드 S,M,L 크기 별로.

3) 파일 업로드 100MB, 500MB, 1GB

4) 동영상 스트리밍

>>  패킷 손실률은 현재 테스트 환경으로는 의미가 없다. 나중에 네트워크 애뮬레이터를 돌릴 수 있는 SW 등을 설치 하여, 환경을 만들어 볼 수 있다.

 

 

[크롬 개발자 도구 참고 자료 _네트워크 관련 ]

Waiting (TTFB) - response의 첫번째바이트가 도달하는데 까지 기다린 시간(TTFB는 Time To First Byte)
Content Download - content가 다운로드가 되는데 까지 기다린 시간, 시작 시점은 response 시작 시점, 종료 시점은 response 종료시점이라 생각해도 무방

 

 

developer.chrome.com/docs/devtools/network/ 

 

 

[측정 수행 방법]

- TTFB: 크롬 개발자 도구

- Memory usage: 크롬 작업 관리자 

- Cpu usage: 크롬 작업 관리자

 

 

[ Learning Http/2 ]

" TTFB는 클라이언트가 HTTP 요청을 한 시점부터 클라이언트의 브라우저가 응답의 첫 번째 바이트를 수신한 시점까지 걸린 시간을 측정한다. 여기에는 소켓 연결 시간, HTTP 요청을 보내는 데 걸린 시간, 페이지의 첫 번째 바이트를 수신하는데 걸린 시간이 모두 포함된다. 종종 DNS 조회 시점 이후부터 계산 하는 것으로 잘못 알고 있지만 원래 TTFB의 계산에는 자원을 불러오기 시작하는데 걸리는 네트워크 지연시간도 포함된다.

 

h1의 경우, 클라이언트는 호스트 연결마다 한 번에 하나씩의 개체만 요청하며 서버는 그 개체들을 순서대로 하나씩 전송한다. 클라이언트는 모든 개체를 수신한 후에 그다음 개체들을 요청하며 서버는 또다시 요청받은 개체들을 전송한다. 이러한 절차는 클라이언트가 페이지를 렌더링하는 데 필요한 모든 개체를 수신할 때까지 계속 반복된다.

 

하지만 h2의 경우, 클라이언트는 HTML을 로딩한 후에 다중화를 사용해 h1에 비해 훨씬 더 많은 동시 요청을 서버로 전송한다. 대개 이 요청들은 h1에서보다 더 짧은 시간 안에 응답을 받지만 요청한 개체에 대한 TTFB 계산 시작 시점이 더 이르기 때문에 TTFB가 더 크게 측정된다. 따라서 프로토콜이 동작하는 방식의 차이로 인해 TTFB의 의미도 h1 과 h2가 서로 다르다"

 

---

Http1.1/ Img 10

 

TTFB

drive.google.com/file/d/14TESQxvCcYpmKNf6iYAIJAQq4aYXOxVk/view?usp=sharing

http1.1_get_img_10_cpu_memory.mov

 

TTFB first : 3.75 ms

TTFB last : 9.37 ms

CPU Usage : 최저 0 / 최고 1.6

Memory Usage : 최저 59.8MB/ 최고 60.1MB

 

Http1.1/ Img 50

drive.google.com/file/d/1QYGzzNpyW2QH3FkyYeq38tHT7P4JRCK9/view?usp=sharing

http1.1_get_img_50_cpu_memory.mov

TTFB first : 3.79ms

TTFB last : 7.17ms

CPU Usage : 최소 0.0 / 최대 3.4

Memory Usage : 최소 38.5MB /최대 40.3MB

 

Http1.1/ Img 100

drive.google.com/file/d/1hVYm3caK3XoPCqXayapWu1ta8dk-0eIk/view?usp=sharing

http1.1_get_img100_cpu_memory.mov

TTFB first: 7.38ms

TTFB last: 7.79ms

CPU Usage: 최소 0 / 최대 4.1

Memory Usage: 최소 40.7 / 최대  42.0 

 

---

Http2.0/ Img 10

drive.google.com/file/d/1KrcC250mI3X9AOrrOxo5-zbv_TDz3fQo/view?usp=sharing

http2_get_img_10_cpu_memory.mov

TTFB first : 46.83ms /42μs 83μs

TTFB last : 51.38 ms /0μs 42μs

CPU Usage : 최소 0 / 최대 1.6

Memory Usage: 최소 37.8MB / 최대 38.5MB

 

Http2.0/ Img 50

drive.google.com/file/d/1CbugL8uxf7S7t9neqPh5lVjnFuYWMUHF/view?usp=sharing

http2_get_img_50_cpu_memory.mov

TTFB first : 151.67ms/0μs 83μs

TTFB last : 156.42 ms/0μs 41μs

CPU Usage : 최소 0 / 최대 2.1

Memory Usage :최소 30.4MB / 최대 37.6MB

 

Http2.0/ Img 100

drive.google.com/file/d/1HvpJrtGkQoeq74Nlz3bW7x660-ZOmfoV/view?usp=sharing

http2_get_img_100_cpu_memory.mov

TTFB first : 9.08ms / 41μs 83μs

TTFB last : 255.25ms / 42μs 84μs

CPU Usage :최소 0 / 최대 1.8

Memory Usage :최소 37.6MB / 최대  39MB

---

 

1) http 1.1	1) http 2.0
TTFB first : 3.75 ms TTFB last : 9.37 ms CPU Usage : 0 / 1.6 Memory Usage :  59.8MB/ 60.1MB	TTFB first : 46.83ms /42μs 83μs TTFB last : 51.38 ms /0μs 42μs CPU Usage : 0 /  1.6 Memory Usage:  37.8MB /  38.5MB
TTFB first : 3.79ms TTFB last : 7.17ms CPU Usage : 0.0 / 3.4 Memory Usage :  38.5MB / 40.3MB	TTFB first : 151.67ms/ 0μs 83μs TTFB last : 156.42 ms/ 0μs 41μs CPU Usage : 0 /  2.1 Memory Usage : 30.4MB /  37.6MB
TTFB first: 7.38ms TTFB last: 7.79ms CPU Usage: 0 / 4.1 Memory Usage:  40.7 / 42.0	TTFB first : 9.08ms / 41μs 83μs TTFB last : 255.25ms / 42μs 84μs CPU Usage : 0 /  1.8 Memory Usage : 37.6MB / 39MB