55
HTTP by @bantic Cory Forsyth Hand Exploring HTTP/1.x Looking forward to HTTP/2

HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Embed Size (px)

DESCRIPTION

Exploring the HTTP protocol by actually writing HTTP request and response messages by hand.

Citation preview

Page 1: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP by

@bantic Cory Forsyth

HandExploring HTTP/1.x

Looking forward to HTTP/2

Page 2: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

201 Created

We build õ-age apps with Ember.js. We take teams from £ to • in no time flat.

Page 3: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Why by hand?

• Why let browsers have all the fun?

• HTTP is human-scale

Page 4: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

How we (a)buse HTTP

• Asset host sharding

• Concatenation

• Spriting

Page 5: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

What is HTTP?

Page 6: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s get some HTMLHTTP/0.9

Page 7: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
Page 8: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTML!

Page 9: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/0.9One-line Request Format

GET /

Not really a spec

Page 10: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s get some HTMLHTTP/1.0

Page 11: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.0 Spec

Request = Request-Line ; Section 5.1 *(( general-header ; Section 4.5 | request-header ; Section 5.3 | entity-header ) CRLF) ; Section 7.1

CRLF [ message-body ] ; Section 4.3

Line break

Request

Page 12: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.0 Spec

Request-Line = Method SP Request-URI SP HTTP-Version CRLF

Request-Line

Page 13: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.0 Spec

Request-Line = GET / HTTP/1.0

Request-Line

Page 14: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
Page 15: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTML!

Page 16: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Quick Aside: TCP

Page 17: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Quick Aside: TCPClient Server

syn

syn ack

ack

3-Way Handshake

Page 18: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

• Minimum 1 Round Trip Per Request

• Can’t make speed of light faster

• How can we avoid this latency?

Quick Aside: TCP

Page 19: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

How we (a)buse HTTP

Sprite all the things!!

Page 20: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.0 Spec

“requires … the connection be … closed by the server after sending the response.”

One connection, one response

–HTTP/1.0 Spec

Page 21: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
Page 22: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

“HTTP/1.1 servers SHOULD maintain persistent connections”

–HTTP/1.1 Spec

Page 23: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s get some HTMLHTTP/1.1

Page 24: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0
Page 25: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Persistent connection!

Page 26: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

“A client … MAY … send multiple requests without waiting for each response.”

–HTTP/1.1 Spec

Pipelining

“A server MUST [respond] in the same order that the requests were received.”

Page 27: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s get some (local) HTML

HTTP/1.1 Pipelining

Page 28: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Request #1Request #2

Response #1

Response #2

Page 29: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

–Web Developer Guy

“I’ll let the browser pipeline all my assets.”

Page 30: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s get some (blocked) HTML

HTTP/1.1 Head-of-Line Blocking

Page 31: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Head-of-Line Blocking

Waiting on Request #1

Page 32: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

–HTTP/1.1 Spec

Pipelining

“A server MUST [respond] in the same order that the requests were received.”

Page 33: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

How we (a)buse HTTP

Asset Host Sharding!

Page 34: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s Serve some HTML

HTTP/1.1

Page 35: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

Response = Status-Line ; Section 6.1 *(( general-header ; Section 4.5 | response-header ; Section 6.2 | entity-header ) CRLF) ; Section 7.1

CRLF [ message-body ] ; Section 7.2

Response

Page 36: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF

Line break

Status-Line

Page 37: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

Status-Line = HTTP/1.1 201 Created

Line break

Status-Line

Page 38: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

The presence of a message-body … is signaled by the inclusion of a Content-Length or Transfer-

Encoding header field

–HTTP/1.1 Spec

Message Headers

Page 39: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1 Spec

HTTP/1.1 200 OK Content-Type: text/html Content-Length: 38 !<html> <body>Hello, world</body> </html>

Example HTTP Response

Status-Line

Headers

message-body

Page 40: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Request Headers

Request-Line

Artisanal, Small-batch

HTTP

$ nc -l 3000

Page 41: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Let’s Serve (dynamic-length) HTML

HTTP/1.1Transfer-Encoding: chunked

Page 42: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/1.1

<chunk-length> chunk

<chunk-length> chunk

0

Transfer-Encoding: chunked

Page 43: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

$ nc -l 3000

Page 44: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP/2

Page 45: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

What is HTTP/2 not?

Page 46: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

• Same HTTP methods (GET, PUT, etc)

• Same usage of headers

• Same use cases

• Still one client, one server

Page 47: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

What is HTTP/2 is?

Page 48: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

• One TCP connection

• Binary! (Different transfer mechanism)

• Header compression

• Upgrade path

Page 49: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

• One TCP connection

• Requests and Responses can cross

• Server push

• Prioritization

Page 50: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

• One TCP connection: implications

• Asset Host Sharding: bad!

• CSS/JS Concatenation: Unnecessary/bad!

• Image spriting: Unnecessary/bad!

Page 51: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

• Binary

• HTTP/2: same semantics, different “on-the-wire” transport

• Can we still make small-batch HTTP/2? (Sorta?)

• More compact, easier to parse

• Mandatory compression

Page 52: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

Where is HTTP/2?

Page 53: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

SPDY• ~ 1% of all servers (2013)

• Google

• Facebook

• Twitter

• CloudFlare

Page 54: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

SPDY: In your browserchrome://net-internals/#events

Page 55: HTTP by Hand: Exploring HTTP/1.0, 1.1 and 2.0

HTTP by

@bantic Cory Forsyth

Hand

Thank you!