Introduction to HTTP/2

Introducing HTTP/2
Ido Flatow
Senior Architect, Sela Group
Microsoft RD & MVP

INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
Agenda
• HTTP 1.1 – What it’s all about
• Web (HTTP 1.1) and its current state
• What is (HTTP/2) – and how fast is it?
• Goals of HTTP/2
• HTTP/2 concepts
• How to troubleshoot

INTRODUCING HTTP/2
HTTP Messages 101
• HTTP is a first class application protocol:
– Widely supported across platforms and devices
– Scalable
– Simple
• Uses the request-response messaging pattern
• Define resource-based semantics and not RPC
(Remote Procedure Call) or methods

INTRODUCING HTTP/2
HTTP Request Messages
GET http://localhost:2300/api/agents/Bond HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-US,en;q=0.7,he;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0;
Windows NT 6.2; WOW64; Trident/6.0)
Accept-Encoding: gzip, deflate
Host: localhost:2300
DNT: 1
Connection: Keep-Alive

INTRODUCING HTTP/2
HTTP Response Messages
HTTP/1.1 200 OK
Cache-Control: public, max-age=300
Content-Type: application/json; charset=utf-8
ETag: "1"
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
Date: Mon, 19 Nov 2012 17:49:40 GMT
Content-Length: 142
{
"Id": "Bond",
"FullName": "James Bond",
"Alias": "007",
"Version": 1,
"Image": "http://localhost:2300/api/agents/Bond.jpg"
}

INTRODUCING HTTP/2
URIs
• HTTP is not an RPC protocol
• HTTP uses URIs to identify resources over
the network
• An HTTP URI has the following basic
structure:
http://theagency.com:8080/agents?id=1
Schema Host Port Absolute
Path
Query

INTRODUCING HTTP/2
Verbs
• HTTP defines a set of Methods or Verbs that add
an action-like semantics to requests
• Verbs are defined as the first segment of the
request-line:
• There are eight verbs defined in HTTP 1.1:
GET http://localhost:4392/travelers/1 HTTP/1.1
GET
POST
PUT
DELETE
HEAD
OPTIONS
TRACE
CONNECT

INTRODUCING HTTP/2
Status Codes
• Status-Codes describe the result of the server’s effort so
satisfy the request
• Passed in the response's status-line as three digit along-side
a textual description called reason-phrases
• HTTP has five different categories of status-codes:
– 1xx – Informational
– 2xx – Success
– 3xx – Redirection
– 4xx – Client Error
– 5xx – Server Error

INTRODUCING HTTP/2
Compression
• Compression is something the client needs to
request
• Requests are not normally compressed
• Accept-Encoding: gzip,deflate
• Server is not obligated to compress the
response
• Content-Encoding: gzip / deflate

INTRODUCING HTTP/2
Web – Current State
• HTTP 1.1 is huge
– HTTP 1.0 RFC 1945 – released 1996 – 60 pages
– HTTP 1.1 RFC 2626 – released 1999 – 176 pages
– Now split into 6 documents – RFC 7230 and family
• Incomplete implementation of RFC
– Eg. HTTP pipelining
• Inadequate use of TCP

INTRODUCING HTTP/2
Transfer Size +300% in 4.5 Years
• January 2012 – August 2016
(http://httparchive.org) top 1000 sites

INTRODUCING HTTP/2
Shortcoming – Current Web
• Concurrent connection limit
• Head of line blocking
• TCP slow start
• Latency – page load time

INTRODUCING HTTP/2
Max Persistent Connections
• From HTTP 1.1 RFC:
– “Clients that use persistent connections SHOULD limit the number of simultaneous connections that
they maintain to a given server. A single-user client SHOULD NOT maintain more than 2
connections with any server or proxy. … These guidelines are intended to improve HTTP
response times and avoid congestion.”
• Firefox 2 – 2
• Firefox 3 and on – 6
• Opera 9.26 – 4
• Opera 12 – 6
• Safari 3 – 4
• Safari 5 – 6
• IE 7 – 2
• IE 8 – 6
• IE 10 – 8
• Chrome – 6
Avg. TCP connections during page load (Last 24 months)

INTRODUCING HTTP/2
Head-of-Line Blocking (No Pipelining)
• Each connection can only handle
one request at a time
• If current request blocks, next
request will wait
• HTTP 1.1 defines pipelining, but
most browsers do not implement
it

INTRODUCING HTTP/2
TCP Slow Start
• TCP does not use the full
bandwidth capacity from
start
• TCP probes network to
find available capacity

INTRODUCING HTTP/2
Latency vs Bandwidth
• Average web page has over 100 objects to download
• Largest impact on page load time is latency, not bandwidth
https://www.akamai.com/us/en/our-thinking/state-of-the-internet-report

INTRODUCING HTTP/2
What is 20ms of Latency?
(RTT = Round-trip time)

INTRODUCING HTTP/2
What Have we Done to Improvise?
• Reduce # of requests and latency overhead
– Spriting
– Concatenation/Bundling (JavaScript, CSS)
– Inlining
• Overcome max connection limit
– Domain sharding

INTRODUCING HTTP/2
Spriting
.d1, .d2, .d3, .d4, .d5, .d6, .d7 {
background:transparent url("dir_sprite.png") no-repeat 4px 0;
}
.d2 {background-position:4px -36px;}
.d3 {background-position:4px -74px;}

INTRODUCING HTTP/2
Concatenation and Inlining
• Join multiple script/style files into a single resource
• Embed JavaScript and CSS within the page
• Inline images in CSS or HTML using data URIs
(Base64 encoding)
<img src="data:image/gif;
base64,R0lGODlhAQABAIAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="
alt="1x1 transparent (GIF) pixel" />

INTRODUCING HTTP/2
Domain Sharing
• Work around the max connection
restriction
• Minimal overhead for DNS lookup

INTRODUCING HTTP/2
Problems with “optimizations”
• Spriting
– Painful and annoying preprocessing, cache invalidations, slower
executions
• Inlining
– Resource can’t be cached, inflates parent document by 33%
overhead
• Concatenation
– Less modular code, expensive cache invalidators, slower
execution
• Domain sharding
– TCP slowstart, excessive DNS lookup, latency

INTRODUCING HTTP/2
HTTP/2 to the Rescue
• Improve latency and less RTT sensitive
• Fix pipelining and remove “head of line
blocking”
• Does not require multiple connections
• Achieved all this by retaining semantics of
HTTP 1.1

INTRODUCING HTTP/2
It Began with SPDY
• Originally proposed by Google as a wire format
extension to HTTP in 2011
• Implements all the major features of HTTP/2
• Serves as a testbed for improvements to HTTP
– Without the burden of standardization
• SPDY became the basis of HTTP/2 in 2012
• Chrome stopped using SPDY in May 2016

INTRODUCING HTTP/2
What is HTTP/2
• HTTP/2 uses a single, multiplexed connection
– Max connection limit per domain can be ignored
• HTTP/2 compresses header data and sends it in a
concise, binary format
– Better than the plain text format used previously
• Less need for popular HTTP 1.1 optimizations

INTRODUCING HTTP/2
HTTP/2 Specification
• Started with SPDY - draft 3
• Comprised out of two specifications
– HTTP/2 – RFC7540
– HPACK (header compression) – RFC7541
• Implementations
– HTTP/2 over TLS (h2)
– HTTP/2 over TCP (h2c)

INTRODUCING HTTP/2
HTTP/2 Over TLS (h2)
• HTTP/2 shipped with TLS as optional
• Firefox and Chrome developer teams stated
they will only implement HTTP/2 over TLS
• Today, only HTTPS:// is allowed for HTTP/2
• TLS must be at least v1.2, with cipher suite
restrictions
https://http2.github.io/http2-spec/#BadCipherSuites

INTRODUCING HTTP/2
HTTP/2 Over TCP (h2c)
• Uses the Upgrade header
• Not many clients support h2c (curl)
GET /page HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: h2c
HTTP2-Settings: (SETTINGS payload)
HTTP/1.1 200 OK
Content-length: 243
Content-type: text/html
(... HTTP/1.1 response ...)
--- or ---
HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: h2c
(... HTTP/2 response ...)

INTRODUCING HTTP/2
HTTP/2 in One Slide
• One TCP connection
• Request → Stream
– Streams are multiplexed
– Streams are prioritized
• Binary framing layer
– Prioritization
– Flow control
– Server push
• Header compression (HPACK)

INTRODUCING HTTP/2
TCP Connections - HTTP 1.1 vs
HTTP/2
• HTTP 1.1
• HTTP/2
Client
http://www.url.com
Client
http://www.url.com

INTRODUCING HTTP/2
DEMO

INTRODUCING HTTP/2
Am I Using HTTP/2?

INTRODUCING HTTP/2
HTTP/2 Support
• Servers
– Microsoft IIS 10
(Win 10 / Server 2016)
– Apache 2.4.12
– Nginx 1.9.5
– Jetty 9.3
– Many more…
• Browsers
– Edge
– IE11 (Windows 10)
– Firefox 40+
– Chrome 43+
– Safari 9+
– Opera 32+
– iOS Safari 9.1+
– Chrome for Android 46+
– CURL
Google, Facebook, Twitter and many more are using HTTP/2 already
HTTP/2 is used by 10% of all websites (Oct. 2016 http://w3techs.com)

INTRODUCING HTTP/2
HTTP/2 Multiplexing
• Each request/response stream has an ID
• Streams comprise of frames (Header, Data…)
• TCP connection can have multiple streams
• Frames can be interleaved in the TCP channel
• Stream dependencies control frame prioritization
• Server (IIS/ASP.NET) sees streams as TCP connections

INTRODUCING HTTP/2
Frame Types
Frame type Description
DATA HTTP body
HEADERS Header fields
PRIORITY Sender-advised priority of stream
RST_STREAM Signal termination of stream
SETTINGS Configuration parameters for the connection
PUSH_PROMISE Signal a promise (push) of referenced sources
PING Measure roundtrip time and “liveness”
GOAWAY Inform peer to stop creating streams for current connection
WINDOW_UPDATE Connection flow control
CONTINUATION Continue a segment of header block fragments

INTRODUCING HTTP/2
Header Compression (HPACK)

INTRODUCING HTTP/2
How to Troubleshoot - Chrome
• Net Internals console in Chrome
• chrome://net-internals/#http2

INTRODUCING HTTP/2
How to Troubleshoot - Wireshark
• Export symmetric session keys to a file
• Load it with Wireshark
– Preferences->Protocols->SSL
• Works with Chrome
and Firefox (<48)
C:> set SSLKEYLOGFILE = %userprofile%desktopsslkeylog.log
$ export SSLKEYLOGFILE=~/Desktop/sslkeylog.log

INTRODUCING HTTP/2
How to Troubleshoot - Wireshark

INTRODUCING HTTP/2
Server Push (Promise)
• After the server responds with an HTML, it waits for requests to
embedded resources
• Server code knows which resources client needs
– JavaScript
– CSS
– Images
– HTML pages of future navigation
• Why not just push it to the client along with the HTML?
• In ASP.NET, use HttpResponse.PushPromise
string path = Request.ApplicationPath;
Response.PushPromise(path + "/Images/1.png");
Response.PushPromise(path + "/Images/2.png");

INTRODUCING HTTP/2
Summary
• Multiplexing
– Multiple requests and responses
– Fixes head-of-line blocking problem
– Avoid the HTTP 1.1 hacks
– Mechanism for request prioritization
• Fewer TCP connections
– Reduces TCP slow start
• Header compression
• Server Push

INTRODUCING HTTP/2
Resources
• https://http2.github.io/faq
• http://daniel.haxx.se/http2/http2-v1.10.pdf
• https://tools.ietf.org/html/rfc7540
• http://blogs.iis.net/davidso/http2
• http://blogs.msdn.com/b/webdev/archive/2015/04/30/updates-
for-asp-net-4-6-web-forms-mvc-5-web-api-2.aspx
@IdoFlatow // idof@sela.co.il // www.idoflatow.net/downloads

Introduction to HTTP/2

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to HTTP/2 (20)

More from Ido Flatow (8)

Recently uploaded (20)

Introduction to HTTP/2

Editor's Notes