더 빠른 웹을 위해: 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일 화요일

더 빠른 웹을 위해: HTTP/2

더 빠른 웹을 위해: HTTP/2

Recommended

More Related Content

What's hot

What's hot(20)

Similar to 더 빠른 웹을 위해: HTTP/2

Similar to 더 빠른 웹을 위해: HTTP/2(8)

더 빠른 웹을 위해: HTTP/2