50
HTTP/2 What’s inside and why @adrianfcole

HTTP/2 What's inside and Why

Embed Size (px)

DESCRIPTION

Learn about HTTP/2 and its relationship to HTTP 1.1 and SPDY. Understand core features and how they benefit security and browser efficiency. More that a "what's new" this talk will leave you with an understanding of why choices in HTTP/2 were made. You'll leave knowing what HTTP/2 is and why it is better for clients and servers.

Citation preview

Page 1: HTTP/2 What's inside and Why

HTTP/2What’s inside and why

@adrianfcole

Page 2: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 3: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 4: HTTP/2 What's inside and Why

@adrianfcole

• staff engineer at Twitter• founded apache jclouds• focus on cloud computing

Page 5: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 6: HTTP/2 What's inside and Why

http/1.1• rfc2616 - June 1999• text-based framing• defined semantics of the web

http://www.w3.org/Protocols/rfc2616/rfc2616.html

Page 7: HTTP/2 What's inside and Why

FYI: RFC 2616 is dead!

• RFC 7230-5 replaces RFC 2616.

• Checkout details on www.mnot.net/blog

Page 8: HTTP/2 What's inside and Why

Latency is a product concern

How you minimize latency is an IT concern

@jpinner

Page 9: HTTP/2 What's inside and Why

Latency of http/1.1

368!

keepalive

Page 10: HTTP/2 What's inside and Why

Ask Ilya why!

• TCP connections need 3-way handshake.

• TLS requires up to 2 more round-trips.

• Read High Performance Browser Networking

http://chimera.labs.oreilly.com/books/1230000000545

Page 11: HTTP/2 What's inside and Why

HTTP nowadays

• Web pages are often >1 MB and >100 requests.

• Http headers can be larger than its data.

• More people on mobile, and latency adds up.

Page 12: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 13: HTTP/2 What's inside and Why

Performance strategies

• Increasing connections

• Reducing requests

Page 14: HTTP/2 What's inside and Why

Increasing connections

• Requests and responses are ordered on a connection.

• To render the page quicker, multiple connections can be used, usually 6.

• some shard sites to get more than that!

• Browsers handle scheduling and priority of these connections.

Page 15: HTTP/2 What's inside and Why

reducing requests

• Caching - RFC 7234 change headers

• Hacks - change content

Page 16: HTTP/2 What's inside and Why

Content hacks

• Spriting - many images into a sheet, chop with css.

• Data uris - encode images in the img tag

• Concatenation - bundle javascript or css into the same file

Page 17: HTTP/2 What's inside and Why

Spriting• #prev {• left: 63px;• width: 43px;• background: url('img_navsprites.gif') -47px 0;• }

• #next {• left: 129px;• width: 43px;• background: url('img_navsprites.gif') -91px 0;• }

http://www.w3schools.com/css/css_image_sprites.asp

Page 18: HTTP/2 What's inside and Why

Data Uri

• <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA• AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/

w38GIAXDIBKE0DHxgljNBAAO• 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

http://en.wikipedia.org/wiki/Data_URI_scheme

Page 19: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 20: HTTP/2 What's inside and Why

spdy/3.1

http://www.chromium.org/spdy/spdy-protocol/spdy-protocol-draft3-1

• google - Sep 2013• binary framing• retains http/1.1 semantics• concurrent multiplexed streams

Page 21: HTTP/2 What's inside and Why

http/2

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

• ietf draft 16 - June 2014• binary framing• retains http/1.1 semantics• concurrent multiplexed streams

Page 22: HTTP/2 What's inside and Why

HTTP/2 Delivers

• Avoids head-of-line blocking by framing multiplexed http over a single connection.

• Identifies request streams allowing prioritization, flow control and cancelation.

• Reduces impact of headers by compressing them.

Page 23: HTTP/2 What's inside and Why

multiplexing

priority

flow control

header compression

server push

http/2 headline features

Page 24: HTTP/2 What's inside and Why

multiplexing

priority

flow control

header compression

server push

http/2 headline features

Page 25: HTTP/2 What's inside and Why

Looking at the whole message

Request: request line, headers, and body

Response: status line, headers, and body

Page 26: HTTP/2 What's inside and Why

http/1.1 round-trip

GZIPPED DATA

Content-Length: 318Cache-Control: private, max-age=60, s-maxage=0Vary: SecurityToken Date: Sun, 02 Feb 2014 20:30:38 GMTContent-Type: application/jsonContent-Encoding: gzip

Host: apihostSecurityToken: b08c85073c1a2d02Accept: application/jsonAccept-encoding: gzip, deflate

GET /things HTTP/1.1

HTTP/1.1 200 OK

Page 27: HTTP/2 What's inside and Why

http/2 round-trip

GZIPPED DATA

:status: 200content-length: 318cache-control: private, max-age=60, s-maxage=0vary: SecurityToken date: Sun, 02 Feb 2014 20:30:38 GMTcontent-type: application/json

:method: GET:authority: apihost:path: /thingssecuritytoken: b08c85073c1a2d02accept: application/json

HEADERS

Stream: 3

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS

DATA

Stream: 3

Flags: END_STREAM

Page 28: HTTP/2 What's inside and Why

interleaving

HEADERS

Stream: 5

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS

DATA

Stream: 5

Flags:

DATA

Stream: 5

Flags: END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 5

Flags: END_HEADERS

DATA

Stream: 3

Flags: END_STREAM

Page 29: HTTP/2 What's inside and Why

Canceling a Stream

HEADERS

Stream: 5

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS

DATA

Stream: 5

Flags:

HEADERS

Stream: 3

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 5

Flags: END_HEADERS

DATA

Stream: 3

Flags: END_STREAM

RST_STREAM

Stream: 5

ErrorCode: CANCEL

Page 30: HTTP/2 What's inside and Why

control frames

HEADERS

Stream: 5

HEADERS

Stream: 3

DATA

Stream: 5

DATA

Stream: 3

HEADERS

Stream: 3

HEADERS

Stream: 5

SETTINGS

Stream: 0

SETTINGS

Stream: 0

DATA

Stream: 5

Page 31: HTTP/2 What's inside and Why

multiplexing

priority

flow control

header compression

server push

http/2 headline features

Page 32: HTTP/2 What's inside and Why

priorityHEADERS

Stream: 5

Flags: END_HEADERS, END_STREAM

Exclusive: 0; Stream Dependency: 1, Weight: 20

HEADERS

Stream: 3

Flags: END_HEADERS

DATA

Stream: 5

Flags:

DATA

Stream: 3

Flags: END_STREAM

HEADERS

Stream: 5

Flags: END_HEADERS

DATA

Stream: 5

Flags: END_STREAM

• Both streams shouldn’t progress before their parent. Weight is relative.

data might be sent earlier

HEADERS

Stream: 3

Flags: END_HEADERS, END_STREAM

Exclusive: 0; Stream Dependency: 1, Weight: 10

Page 33: HTTP/2 What's inside and Why

multiplexing

priority

flow control

header compression

server push

http/2 headline features

Page 34: HTTP/2 What's inside and Why

flow control

DATA

Stream: 3

Flags:

HEADERS

Stream: 3

Flags: END_HEADERS

WINDOW_UPDATE

Stream: 3

Increment: 8192you can send 8k more data

DATA

Stream: 3

Flags: END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS

• flow control: send up to the lesser of stream window and connection window (stream 0)

Page 35: HTTP/2 What's inside and Why

multiplexing

priority

flow control

header compression

server push

http/2 headline features

Page 36: HTTP/2 What's inside and Why

http/1.1 headers

GZIPPED DATA

Content-Length: 318Cache-Control: private, max-age=60, s-maxage=0Vary: SecurityToken Date: Sun, 02 Feb 2014 20:30:38 GMTContent-Type: application/jsonContent-Encoding: gzip

Host: apihostSecurityToken: b08c85073c1a2d02Accept: application/jsonAccept-encoding: gzip, deflate

GET /things HTTP/1.1

HTTP/1.1 200 OK

168!

195!

318

• You can gzip data, but not headers!

Page 37: HTTP/2 What's inside and Why

header compression

GZIPPED DATA

:status: 200content-length: 318cache-control: private, max-age=60, s-maxage=0vary: SecurityToken date: Sun, 02 Feb 2014 20:30:38 GMTcontent-type: application/jsoncontent-encoding: gzip

:method: GET:authority: apihost:path: /thingssecuritytoken: b08c85073c1a2d02accept: application/jsonaccept-encoding: gzip, deflate

HEADERS

Stream: 3

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS

DATA

Stream: 3

Flags: END_STREAM

8 bytes

52 bytes compressed

8 bytes

85 bytes compressed

• 161 byte overhead instead of 363 8 bytes

Page 38: HTTP/2 What's inside and Why

indexed headers!

GZIPPED DATA

:status: 200content-length: 318cache-control: private, max-age=60, s-maxage=0vary: SecurityToken date: Sun, 02 Feb 2014 20:30:39 GMTcontent-type: application/jsoncontent-encoding: gzip

:method: GET:authority: apihost:path: /thingssecuritytoken: b08c85073c1a2d02accept: application/jsonaccept-encoding: gzip, deflate

HEADERS

Stream: 3

Flags: END_HEADERS, END_STREAM

HEADERS

Stream: 3

Flags: END_HEADERS

DATA

Stream: 3

Flags: END_STREAM

8 bytes

28 bytes compressed

8 bytes

30 bytes compressed

• 82 byte overhead instead of 363 8 bytes

Page 39: HTTP/2 What's inside and Why

hpack

http://tools.ietf.org/html/draft-ietf-httpbis-header-compression-10

• ietf draft 10 - Dec 2014• static and dynamic table• huffman encoding

Page 40: HTTP/2 What's inside and Why

multiplexing

priority

flow control

header compression

server push

http/2 headline features

Page 41: HTTP/2 What's inside and Why

push promise

:method: GET:path: /things...

HEADERS

Stream: 3

HEADERS

Stream: 3

DATA

Stream: 4

:method: GET:path: /users/0...

PUSH_PROMISE

Stream: 3

Promised-Stream: 4

HEADERS

Stream: 4

push response goes into

cache

DATA

Stream: 3

Server guesses a future request or indicates a cache invalidation

Page 42: HTTP/2 What's inside and Why

Opportunities

Better utilize TCP

Avoid content hacks

Better long-tail latency

Less buffer bloat

Page 43: HTTP/2 What's inside and Why

ChallengesHigher impact of TCP Slow start

Server and browser support

Fairness on the network

debugging a binary protocol

Writing for tomorrow, with today’s TLS

Page 44: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 45: HTTP/2 What's inside and Why

Firefox• Supports latest drafts• source/netwerk/protocol/http• http/2 lead: Patrick McManus

https://wiki.mozilla.org/Networking/http2

Page 46: HTTP/2 What's inside and Why

Try out http2 with Firefox!enable http2 in about:config

hit https://h2duo.cloudapp.net/ with Network Tools on

Page 47: HTTP/2 What's inside and Why

Push promise in FirefoxPush promises are sent into a per-session memory cache.

When the client requests the pushed resources, they are committed to the disk cache.

Allows a cap and easy discard of unused pushes.

http://bitsup.blogspot.com/2014/12/firefox-gecko-api-for-http2-push.html

Page 48: HTTP/2 What's inside and Why

introduction

http as we know it

http performance

hello http/2!

firefox

wrapping up

Page 49: HTTP/2 What's inside and Why

Engage!

• Get your web sites running http/2 or spdy!

• Spread the word and get involved in http/2.

• Provide feedback to httpbis!

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

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

Page 50: HTTP/2 What's inside and Why

Thank you!

yes, twitter is hiring!yes, twitter runs http/2!

github http2/http2-spec@adrianfcole