10월 17일 세종대에서 열린 한국 웹 20주년 컨퍼런스에서 발표한 "더 빠른 웹을 위해: HTTP/2" 발표자료입니다.

1. HTTP/2
더 빠른 웹을 위해
14년 10월 21일 화요일

2. 발표자 소개
• 이응준
• NAVER LABS에서 서버사이드 웹 프로그래머로 근무중
• 책 HTTP: The Definitive Guide 번역중
14년 10월 21일 화요일

3. 오늘 이야기할 것
• HTTP/2는
• 왜 만들었나
• 왜 빠른가
14년 10월 21일 화요일

4. 왜 만들었나
14년 10월 21일 화요일

5. 왜 만들었나
• HTTP/1이 너무 느려서
14년 10월 21일 화요일

6. HTTP/1은 왜 느린가
• HTTP/1의 동작:
• 클라이언트가 서버에 요청을 보낸다.
• 서버가 클라이언트에게 그에 대한 응답을 보낸다.
• 대역폭과 상관없이 round trip 때문에 느려짐
14년 10월 21일 화요일

7. HTTP/1은 왜 느린가
• 요청이 갔다가 응답이 돌아오는데 걸리는 시간
• 서울 <=> 춘천: 8ms
• 서울 <=> 일본: 35ms
• 서울 <=> 뉴욕: 200ms
• 지구 <=> 화성: 8분 ~ 48분
14년 10월 21일 화요일

8. 태초의 HTTP
HTML x 1
PNG x 20
14년 10월 21일 화요일

9. 태초의 HTTP
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• TCP 커넥션 닫음
• TCP 커넥션 수립 (3-way handshake)
• PNG 파일 1개 가져옴
• TCP 커넥션 닫음
20번 반복
14년 10월 21일 화요일

10. 태초의 HTTP
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• TCP 커넥션 닫음
• TCP 커넥션 수립 (3-way handshake)
• PNG 파일 1개 가져옴
• TCP 커넥션 닫음
42 RTT
20번 반복
14년 10월 21일 화요일

11. HTTP/1.0+ (KEEP-ALIVE)
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• PNG 파일 1개 가져옴 (20번 반복)
14년 10월 21일 화요일

12. HTTP/1.0+ (KEEP-ALIVE)
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• PNG 파일 1개 가져옴 (20번 반복)
22 RTT
14년 10월 21일 화요일

13. PARALLEL CONNECTIONS
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• TCP 커넥션 7개 더 수립 (3-way handshake)
• PNG 파일 8개 가져옴
• PNG 파일 8개 더 가져옴
• PNG 파일 4개 더 가져옴
14년 10월 21일 화요일

14. PARALLEL CONNECTIONS
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• TCP 커넥션 7개 더 수립 (3-way handshake)
• PNG 파일 8개 가져옴
• PNG 파일 8개 더 가져옴
• PNG 파일 4개 더 가져옴
6 RTT
14년 10월 21일 화요일

15. PIPELINING
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• PNG 파일 20개 가져옴
14년 10월 21일 화요일

16. PIPELINING
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• PNG 파일 20개 가져옴
3 RTT
14년 10월 21일 화요일

17. PIPELINING
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• PNG 파일 20개 가져옴
구현이 어려워서
잘 안씀!
14년 10월 21일 화요일

18. HTTP/1은 왜 느린가 2
• 헤더가 너무 큼 (특히 쿠키)
14년 10월 21일 화요일

19. 성능 개선을 위한 많은 노력들
• HTTP-NG 프로젝트 (1997)
• Roy Fielding이 WAKA 제안
• S+M(Speedy+Mobility, 마이크로소프트)
• SPDY (구글, 2009)
14년 10월 21일 화요일

20. HTTP/2
• HTTP 작업그룹이 SPDY를 기반으로 HTTP/2 작업 시작
(2012년 10월)
14년 10월 21일 화요일

21. HTTP/2는 왜 빠른가
•Header Compression
•Multiplexed Streams
•Server Push
•Stream Priority
14년 10월 21일 화요일

22. HEADER COMPRESSION
•Huffman Coding
•Header Tables
14년 10월 21일 화요일

23. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
20:13:21 GMT”를 클라이언트에게 전송
date:Mon, 21 Oct 2013 20:13:21 GMT C S
14년 10월 21일 화요일

24. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
20:13:21 GMT”를 클라이언트에게 전송
C S
..date..z...T.D. .....f...-..
헤더값에 Huffman Coding
적용: 34 => 29
14년 10월 21일 화요일

25. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
C 20:13:21 GMT”를 클라이언트에게 전송
S ..date..z...T.D. .....f...-..
Index Header Name Header Value
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
Index Header Name Header Value
Dynamic Table
14년 10월 21일 화요일

26. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
C 20:13:21 GMT”를 클라이언트에게 전송
S ....z...T.D. .....f...-..
Index Header Name Header Value
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
Index Header Name Header Value
Dynamic Table
헤더 이름을 Static Table
인덱스로 대체: 29 => 24
14년 10월 21일 화요일

27. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
C 20:13:21 GMT”를 클라이언트에게 전송
S ....z...T.D. .....f...-..
Index Header Name Header Value
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
Index Header Name Header Value
62 date
Mon, 21 Oct
2013 20:13:21
GMT
Dynamic Table
14년 10월 21일 화요일

28. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
C 20:13:21 GMT”를 클라이언트에게 “또” 전송
S
Index Header Name Header Value
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
Index Header Name Header Value
62 date
Mon, 21 Oct
2013 20:13:21
GMT
Dynamic Table
14년 10월 21일 화요일

29. HEADER COMPRESSION
서버가 헤더 “date:Mon, 21 Oct 2013
C 20:13:21 GMT”를 클라이언트에게 “또” 전송
S
Index Header Name Header Value
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
Index Header Name Header Value
62 date
Mon, 21 Oct
2013 20:13:21
GMT
Dynamic Table
.
헤더 필드를 Dynamic Table
인덱스로 대체: 24 => 1
14년 10월 21일 화요일

30. MULTIPLEXED STREAMS
한 커넥션으로 동시에 여러
메시지를 주고 받을 수 있음
14년 10월 21일 화요일

31. MULTIPLEXED STREAMS
HTML x 1
PNG x 20
Max Connections: 8
14년 10월 21일 화요일

32. MULTIPLEXED STREAMS
• HTTP/1.1
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• TCP 커넥션 7개를 더 열고
• PNG 파일 8개를 요청해서 받음
• PNG 파일 8개를 더 요청해서 받음
• PNG 파일 4개를 더 요청해서 받음
14년 10월 21일 화요일

33. MULTIPLEXED STREAMS
• HTTP/1.1
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• TCP 커넥션 7개를 더 열고
• PNG 파일 8개를 요청해서 받음
• PNG 파일 8개를 더 요청해서 받음
• PNG 파일 4개를 더 요청해서 받음
• HTTP/2
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• PNG 파일 20개를 요청해서 받음
14년 10월 21일 화요일

34. MULTIPLEXED STREAMS
C S
14년 10월 21일 화요일

35. MULTIPLEXED STREAMS
GET /a.png
GET /b.png
GET /c.png
...
C S
14년 10월 21일 화요일

36. MULTIPLEXED STREAMS
1: GET /a.png
3: GET /b.png
5: GET /c.png
...
C 1 3 5 7 9 11 13 15 17 19
S
14년 10월 21일 화요일

37. MULTIPLEXED STREAMS
1: GET /a.png
3: GET /b.png
5: GET /c.png
Frame
...
C 1 3 5 7 9 11 13 15 17 19
S
14년 10월 21일 화요일

38. MULTIPLEXED STREAMS
C 1 3 5 7 9 11 13 15 17 19
S 1 1 3 5 5 3 5 1 1 3 1: a.png
3: b.png
5: c.png
...
Frame
1: GET /a.png
3: GET /b.png
5: GET /c.png
...
14년 10월 21일 화요일

39. MULTIPLEXED STREAMS
Stream 1: GET /a.png
Stream 3: GET /b.png
Stream 5: GET /c.png
...
C 1 3 5 7 9 11 13 15 17 19
S
1 1 3 5 5 3 5 1 1 3 Stream 1: a.png
Stream 3: b.png
Stream 5: c.png
...
Frame
14년 10월 21일 화요일

40. SERVER PUSH
달라고 하지도 않은 리소스를
서버가 마음대로 보냄
14년 10월 21일 화요일

41. SERVER PUSH
HTML x 1
PNG x 2
14년 10월 21일 화요일

42. SERVER PUSH
• Server Push 안하면:
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• 그림 파일 2개를 요청해서 받음
14년 10월 21일 화요일

43. SERVER PUSH
• Server Push 안하면:
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• 그림 파일 2개를 요청해서 받음
• Server Push 하면:
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 그림
파일 2개와 함께 받음
14년 10월 21일 화요일

44. SERVER PUSH
C 1
S
1 1 1 1 2 1 2 4 1 4 1: PUSH_PROMISE (2: a.png)
1: PUSH_PROMISE (4: b.png)
1: a.html
2: a.png
4: b.png
1: GET /a.html
14년 10월 21일 화요일

45. SERVER PUSH
C 1
S
1 1 1 1 2 1 2 4 1 4 1: PUSH_PROMISE (2: a.png)
1: PUSH_PROMISE (4: b.png)
1: a.html
2: a.png
4: b.png
1: GET /a.html
a.png를 2번 스트림으로 보내줄
것이니 요청하지 말아라
14년 10월 21일 화요일

46. STREAM PRIORITY
요청에 의존성 관계를
지정할 수 있음
14년 10월 21일 화요일

47. STREAM PRIORITY
HTML x 1
CSS x 1
PNG x 2
14년 10월 21일 화요일

48. STREAM PRIORITY
• 의존성 지정 안하면:
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• CSS 문서 1개와 그림 파일 2개를
요청해서 받음
• CSS 문서가 늦게 와서 렌더링이
늦어짐
14년 10월 21일 화요일

49. STREAM PRIORITY
• 의존성 지정 안하면:
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• CSS 문서 1개와 그림 파일 2개를
요청해서 받음
• CSS 문서가 늦게 와서 렌더링이
늦어짐
• 의존성 지정하면:
• TCP 커넥션 1개를 열고
• HTML 문서 1개를 요청해서 받음
• CSS 문서 1개와 그림 파일 2개를
요청해서 받음. 그림 파일이 CSS
에 의존성이 있다고 알려줌.
• CSS 문서가 가장 먼저 순조롭게
렌더링
14년 10월 21일 화요일

50. STREAM PRIORITY
C 7 5 3
S
3 3 3 3 7 5 5 7 7 5 3: a.css
5: 1.png
7: 2.png
3: GET /a.css
5: GET /1.png (3에 의존)
7: GET /2.png (3에 의존)
14년 10월 21일 화요일

51. STREAM PRIORITY
C 7 5 3
S
3 3 3 3 7 5 5 7 7 5 3: a.css
5: 1.png
7: 2.png
3: GET /a.css
5: GET /1.png (3에 의존)
7: GET /2.png (3에 의존)
서버가 어떻게 줘야하는지에
대한 규칙은 전혀 없음
14년 10월 21일 화요일

52. FAQ
14년 10월 21일 화요일

53. HTTP/1에서 변하는 것
• HTTP 메시지 포맷
• HTTP 메시지 전송방법
• Connection 헤더 사라짐
• chunked 인코딩 사용 금지
14년 10월 21일 화요일

54. 변하지 않는 것
• “HTTP's existing semantics remain unchanged.”
• RFC 7231, 7232, 7233, 7234, 7235 그대로 사용함
14년 10월 21일 화요일

55. SPDY와 다른 점
헤더 압축
SPDY
HTTP/2
zlib
HPACK
14년 10월 21일 화요일

56. SPDY와 다른 점
헤더 압축
SPDY
HTTP/2
zlib
HPACK
CRIME
취약점
14년 10월 21일 화요일

57. 브라우저 지원
• IE 11 on Windows 8
• Firefox 34
• Chrome --enable-spdy4
14년 10월 21일 화요일

58. 현재 HTTP/2 진행상황
•Working Group Last Call (마무리 단계)
• 2015년 2월 RFC로 출판될 “예정”
14년 10월 21일 화요일

59. HTTP/2에 기여하려면
• HTTP/2 혹은 HPACK 초안을 읽고,
• ietf-http-wg@w3.org 로 의견을 보냅니다.
• 오타 수정 같은 것은 https://github.com/http2/http2-spec
로 PullRequest를 보내도 좋습니다.
14년 10월 21일 화요일