Introducing HTTP/2Ido FlatowSenior Architect, Sela GroupMicrosoft 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://bit.ly/2gcMBRQ - Please tell us how it was
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://bit.ly/2gcMBRQ - Please tell us how it was
HTTP Request MessagesGET http://localhost:2300/api/agents/Bond HTTP/1.1Accept: text/html, application/xhtml+xml, */*Accept-Language: en-US,en;q=0.7,he;q=0.3User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)Accept-Encoding: gzip, deflateHost: localhost:2300DNT: 1Connection: Keep-Alive
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
HTTP Response MessagesHTTP/1.1 200 OKCache-Control: public, max-age=300Content-Type: application/json; charset=utf-8ETag: "1"Server: Microsoft-IIS/8.0X-AspNet-Version: 4.0.30319Date: Mon, 19 Nov 2012 17:49:40 GMTContent-Length: 142
{ "Id": "Bond", "FullName": "James Bond", "Alias": "007", "Version": 1, "Image": "http://localhost:2300/api/agents/Bond.jpg"}
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
GETPOSTPUTDELETE
HEADOPTIONSTRACECONNECT
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
Transfer Size +300% in 4.5 Years• January 2012 – August 2016
(http://httparchive.org) top 1000 sites
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
Shortcoming – Current Web• Concurrent connection limit• Head of line blocking• TCP slow start• Latency – page load time
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
TCP Slow Start• TCP does not use the
full bandwidth capacity from start
• TCP probes network to find available capacity
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
What is 20ms of Latency?
(RTT = Round-trip time)
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
Domain Sharing• Work around the max connection
restriction• Minimal overhead for DNS lookup
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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://bit.ly/2gcMBRQ - Please tell us how it was
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://bit.ly/2gcMBRQ - Please tell us how it was
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
restrictionshttps://http2.github.io/http2-spec/#BadCipherSuites
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
HTTP/2 Over TCP (h2c)• Uses the Upgrade header• Not many clients support h2c (curl)
GET /page HTTP/1.1Host: server.example.comConnection: Upgrade, HTTP2-SettingsUpgrade: h2c HTTP2-Settings: (SETTINGS payload)
HTTP/1.1 200 OK Content-length: 243Content-type: text/html(... HTTP/1.1 response ...)
--- or ---
HTTP/1.1 101 Switching Protocols Connection: UpgradeUpgrade: h2c(... HTTP/2 response ...)
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
DEMO
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
Am I Using HTTP/2?
IE
Chrome
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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+– CURLGoogle, 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://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
Frame TypesFrame type DescriptionDATA HTTP bodyHEADERS Header fieldsPRIORITY Sender-advised priority of streamRST_STREAM Signal termination of streamSETTINGS Configuration parameters for the connectionPUSH_PROMISE Signal a promise (push) of referenced sourcesPING Measure roundtrip time and “liveness”GOAWAY Inform peer to stop creating streams for current connectionWINDOW_UPDATE Connection flow controlCONTINUATION Continue a segment of header block fragments
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
Header Compression (HPACK)
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
DEMO
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
How to Troubleshoot - Chrome• Net Internals console in Chrome• chrome://net-internals/#http2
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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%\desktop\sslkeylog.log$ export SSLKEYLOGFILE=~/Desktop/sslkeylog.log
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
How to Troubleshoot - Wireshark
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
How to Troubleshoot - Wireshark
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
How to Troubleshoot - Wireshark
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
DEMO
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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.PushPromisestring path = Request.ApplicationPath;Response.PushPromise(path + "/Images/1.png");Response.PushPromise(path + "/Images/2.png");
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
DEMO
INTRODUCING HTTP/2
http://bit.ly/2gcMBRQ - Please tell us how it was
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
http://bit.ly/2gcMBRQ - Please tell us how it was
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 // [email protected] // www.idoflatow.net/downloads
Top Related