더 빠른 웹을 위해: http/2

HTTP/2더 빠른 웹을 위해

14년 10월 21일 화요일

발표자 소개

•이응준

•NAVER LABS에서 서버사이드 웹 프로그래머로 근무중

•책 HTTP: The Definitive Guide 번역중


오늘 이야기할 것

• HTTP/2는

•왜 만들었나

•왜 빠른가


왜 만들었나


왜 만들었나

• HTTP/1이 너무 느려서


HTTP/1은 왜 느린가

• HTTP/1의 동작:

•클라이언트가 서버에 요청을 보낸다.

•서버가 클라이언트에게 그에 대한 응답을 보낸다.

•대역폭과 상관없이 round trip 때문에 느려짐


HTTP/1은 왜 느린가

•요청이 갔다가 응답이 돌아오는데 걸리는 시간

•서울 <=> 춘천: 8ms

•서울 <=> 일본: 35ms

•서울 <=> 뉴욕: 200ms

•지구 <=> 화성: 8분 ~ 48분


태초의 HTTP

HTML x 1PNG x 20


태초의 HTTP

• TCP 커넥션 수립 (3-way handshake)

• HTML 파일 1개 가져옴

• TCP 커넥션 닫음


• PNG 파일 1개 가져옴


20번 반복


태초의 HTTP







20번 반복

42 RTT


HTTP/1.0+ (KEEP-ALIVE)



• PNG 파일 1개 가져옴 (20번 반복)


HTTP/1.0+ (KEEP-ALIVE)



• PNG 파일 1개 가져옴 (20번 반복)

22 RTT


PARALLEL CONNECTIONS



• TCP 커넥션 7개 더 수립 (3-way handshake)


• PNG 파일 8개 더 가져옴



PARALLEL CONNECTIONS



• TCP 커넥션 7개 더 수립 (3-way handshake)




6 RTT


PIPELINING





PIPELINING




3 RTT


PIPELINING




구현이 어려워서잘 안씀!


HTTP/1은 왜 느린가 2

•헤더가 너무 큼 (특히 쿠키)


성능 개선을 위한 많은 노력들

• HTTP-NG 프로젝트 (1997)

• Roy Fielding이 WAKA 제안

• S+M(Speedy+Mobility, 마이크로소프트)

• SPDY (구글, 2009)


HTTP/2

• HTTP 작업그룹이 SPDY를 기반으로 HTTP/2 작업 시작 (2012년 10월)


HTTP/2는 왜 빠른가

•Header Compression

•Multiplexed Streams

•Server Push

•Stream Priority


HEADER COMPRESSION

•Huffman Coding

•Header Tables


HEADER COMPRESSION

date:Mon, 21 Oct 2013 20:13:21 GMTC S

서버가 헤더 “date:Mon, 21 Oct 2013 20:13:21 GMT”를 클라이언트에게 전송


HEADER COMPRESSION

헤더값에 Huffman Coding 적용: 34 => 29

C S서버가 헤더 “date:Mon, 21 Oct 2013 20:13:21 GMT”를 클라이언트에게 전송

..date..z...T.D. .....f...-..


HEADER COMPRESSION

C S..date..z...T.D. .....f...-..


Index Header Name Header Value

1 :authority

... ... ...

33 date

... ... ...

61 www-authenticate

Static Table

Dynamic Table



HEADER COMPRESSION

C S....z...T.D. .....f...-..



1 :authority

... ... ...

33 date

... ... ...

61 www-authenticate

Static Table

Dynamic Table

헤더 이름을 Static Table인덱스로 대체: 29 => 24



HEADER COMPRESSION

C S....z...T.D. .....f...-..



1 :authority

... ... ...

33 date

... ... ...

61 www-authenticate

Static Table

Dynamic Table


62 dateMon, 21 Oct 2013 20:13:21 GMT


HEADER COMPRESSION

C S서버가 헤더 “date:Mon, 21 Oct 2013 20:13:21 GMT”를 클라이언트에게 “또” 전송


1 :authority

... ... ...

33 date

... ... ...

61 www-authenticate

Static Table

Dynamic Table


62 dateMon, 21 Oct 2013 20:13:21 GMT


HEADER COMPRESSION

C S서버가 헤더 “date:Mon, 21 Oct 2013 20:13:21 GMT”를 클라이언트에게 “또” 전송


1 :authority

... ... ...

33 date

... ... ...

61 www-authenticate

Static Table


62 dateMon, 21 Oct 2013 20:13:21 GMT

Dynamic Table

.헤더 필드를 Dynamic Table 인덱스로 대체: 24 => 1


MULTIPLEXED STREAMS

한 커넥션으로 동시에 여러 메시지를 주고 받을 수 있음


MULTIPLEXED STREAMS

HTML x 1PNG x 20

Max Connections: 8


MULTIPLEXED STREAMS• HTTP/1.1

• TCP 커넥션 1개를 열고

• HTML 문서 1개를 요청해서 받음

• TCP 커넥션 7개를 더 열고

• PNG 파일 8개를 요청해서 받음

• PNG 파일 8개를 더 요청해서 받음



MULTIPLEXED STREAMS• HTTP/1.1



• TCP 커넥션 7개를 더 열고




• HTTP/2





MULTIPLEXED STREAMS

C S14년 10월 21일 화요일

MULTIPLEXED STREAMS

C S

GET /a.pngGET /b.pngGET /c.png...


MULTIPLEXED STREAMS

C S

1: GET /a.png3: GET /b.png5: GET /c.png...1 3 5 7 9 11 13 15 17 19


MULTIPLEXED STREAMS

C S

1: GET /a.png3: GET /b.png5: GET /c.png...1 3 5 7 9 11 13 15 17 19

Frame


MULTIPLEXED STREAMS

1 3 5 7 9 11 13 15 17 19

1 1 3 5 5 3 5 1 1 3C S1: a.png3: b.png5: c.png

...

Frame

1: GET /a.png3: GET /b.png5: GET /c.png...


MULTIPLEXED STREAMS

1 3 5 7 9 11 13 15 17 19

1 1 3 5 5 3 5 1 1 3C S

Stream 1: GET /a.pngStream 3: GET /b.pngStream 5: GET /c.png ...

Stream 1: a.pngStream 3: b.pngStream 5: c.png

...

Frame


SERVER PUSH

달라고 하지도 않은 리소스를 서버가 마음대로 보냄


SERVER PUSH

HTML x 1PNG x 2


SERVER PUSH• Server Push 안하면:



• 그림 파일 2개를 요청해서 받음


SERVER PUSH• Server Push 안하면:



• 그림 파일 2개를 요청해서 받음

• Server Push 하면:


• HTML 문서 1개를 요청해서 그림파일 2개와 함께 받음


SERVER PUSH

1

1 1 1 1 2 1 2 4 1 4C S1: PUSH_PROMISE (2: a.png)1: PUSH_PROMISE (4: b.png)

1: a.html2: a.png4: b.png

1: GET /a.html


SERVER PUSH

1

1 1 1 1 2 1 2 4 1 4C S1: PUSH_PROMISE (2: a.png)

1: PUSH_PROMISE (4: b.png)1: a.html2: a.png4: b.png

1: GET /a.html

a.png를 2번 스트림으로 보내줄 것이니 요청하지 말아라


STREAM PRIORITY

요청에 의존성 관계를 지정할 수 있음

Html File designed by <a href="http://www.thenounproject.com/imicons">iconsmind.com</a>

from the <a href="http://www.thenounproject.com">Noun Project</a>


STREAM PRIORITY

HTML x 1CSS x 1

PNG x 2

Html File designed by <a href="http://www.thenounproject.com/imicons">iconsmind.com</a>

from the <a href="http://www.thenounproject.com">Noun Project</a>


STREAM PRIORITY• 의존성 지정 안하면:



• CSS 문서 1개와 그림 파일 2개를 요청해서 받음

• CSS 문서가 늦게 와서 렌더링이 늦어짐


STREAM PRIORITY• 의존성 지정 안하면:



• CSS 문서 1개와 그림 파일 2개를 요청해서 받음

• CSS 문서가 늦게 와서 렌더링이 늦어짐

• 의존성 지정하면:



• CSS 문서 1개와 그림 파일 2개를 요청해서 받음. 그림 파일이 CSS에 의존성이 있다고 알려줌.

• CSS 문서가 가장 먼저 순조롭게 렌더링


STREAM PRIORITY

7 5 3

3 3 3 3 7 5 5 7 7 5C S3: a.css

5: 1.png7: 2.png

3: GET /a.css5: GET /1.png (3에 의존)7: GET /2.png (3에 의존)


STREAM PRIORITY

7 5 3

3 3 3 3 7 5 5 7 7 5C S3: a.css

5: 1.png7: 2.png

3: GET /a.css5: GET /1.png (3에 의존)7: GET /2.png (3에 의존)

서버가 어떻게 줘야하는지에 대한 규칙은 전혀 없음


FAQ


HTTP/1에서 변하는 것

• HTTP 메시지 포맷

• HTTP 메시지 전송방법

• Connection 헤더 사라짐

• chunked 인코딩 사용 금지


변하지 않는 것

• “HTTP's existing semantics remain unchanged.”

• RFC 7231, 7232, 7233, 7234, 7235 그대로 사용함


SPDY와 다른 점

헤더 압축

SPDY

HTTP/2

zlib

HPACK


SPDY와 다른 점

헤더 압축

SPDY

HTTP/2

zlib

HPACK

CRIME 취약점


브라우저 지원

• IE 11 on Windows 8

• Firefox 34

• Chrome --enable-spdy4


현재 HTTP/2 진행상황

•Working Group Last Call (마무리 단계)

• 2015년 2월 RFC로 출판될 “예정”


HTTP/2에 기여하려면

• HTTP/2 혹은 HPACK 초안을 읽고,

• [email protected] 로 의견을 보냅니다.

•오타 수정 같은 것은 https://github.com/http2/http2-spec 로 PullRequest를 보내도 좋습니다.


mailto:[email protected]

mailto:[email protected]

https://github.com/http2/http2-spec

https://github.com/http2/http2-spec

더 빠른 웹을 위해: http/2

Internet