더 빠른 웹을 위해: 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 1
PNG x 20

태초의 HTTP
• TCP 커넥션 수립 (3-way handshake)
• HTML 파일 1개 가져옴
• TCP 커넥션 닫음
• PNG 파일 1개 가져옴
20번 반복

태초의 HTTP
42 RTT
20번 반복

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 GMT”를 클라이언트에게 전송
date:Mon, 21 Oct 2013 20:13:21 GMT C S

HEADER COMPRESSION
20:13:21 GMT”를 클라이언트에게 전송
C S
..date..z...T.D. .....f...-..
헤더값에 Huffman Coding
적용: 34 => 29

HEADER COMPRESSION
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
Dynamic Table

HEADER COMPRESSION
S ....z...T.D. .....f...-..
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
Dynamic Table
헤더 이름을 Static Table
인덱스로 대체: 29 => 24

HEADER COMPRESSION
S ....z...T.D. .....f...-..
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
62 date
Mon, 21 Oct
2013 20:13:21
GMT
Dynamic Table

HEADER COMPRESSION
C 20:13:21 GMT”를 클라이언트에게 “또” 전송
S
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
62 date
Mon, 21 Oct
2013 20:13:21
GMT
Dynamic Table

HEADER COMPRESSION
C 20:13:21 GMT”를 클라이언트에게 “또” 전송
S
1 :authority
... ... ...
33 date
... ... ...
61 www-authenticate
Static Table
62 date
Mon, 21 Oct
2013 20:13:21
GMT
Dynamic Table
.
헤더 필드를 Dynamic Table
인덱스로 대체: 24 => 1

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

MULTIPLEXED STREAMS
HTML x 1
PNG 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 S

MULTIPLEXED STREAMS
GET /a.png
GET /b.png
GET /c.png
...
C S

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

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

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
...

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

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

SERVER PUSH
HTML x 1
PNG x 2

SERVER PUSH
• Server Push 안하면:
• 그림 파일 2개를 요청해서 받음

SERVER PUSH
• Server Push 안하면:
• 그림 파일 2개를 요청해서 받음
• Server Push 하면:
• HTML 문서 1개를 요청해서 그림
파일 2개와 함께 받음

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

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번 스트림으로 보내줄
것이니 요청하지 말아라

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

STREAM PRIORITY
HTML x 1
CSS x 1
PNG x 2

STREAM PRIORITY
• 의존성 지정 안하면:
• CSS 문서 1개와 그림 파일 2개를
요청해서 받음
• CSS 문서가 늦게 와서 렌더링이
늦어짐

STREAM PRIORITY
• 의존성 지정 안하면:
요청해서 받음
• CSS 문서가 늦게 와서 렌더링이
늦어짐
• 의존성 지정하면:
요청해서 받음. 그림 파일이 CSS
에 의존성이 있다고 알려줌.
• CSS 문서가 가장 먼저 순조롭게
렌더링

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에 의존)

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
서버가 어떻게 줘야하는지에
대한 규칙은 전혀 없음

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 초안을 읽고,
• ietf-http-wg@w3.org 로 의견을 보냅니다.
• 오타 수정 같은 것은 https://github.com/http2/http2-spec
로 PullRequest를 보내도 좋습니다.

더 빠른 웹을 위해: HTTP/2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à 더 빠른 웹을 위해: HTTP/2

Similaire à 더 빠른 웹을 위해: HTTP/2 (8)

더 빠른 웹을 위해: HTTP/2