Introduction to HTTP/2
-
Upload
ido-flatow -
Category
Technology
-
view
197 -
download
2
Transcript of Introduction to HTTP/2
![Page 1: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/1.jpg)
Introducing HTTP/2Ido FlatowSenior Architect, Sela GroupMicrosoft RD & MVP
![Page 2: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/2.jpg)
INTRODUCING HTTP/2
Agenda• 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
![Page 3: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/4.jpg)
INTRODUCING HTTP/2
Transfer Size +300% in 4.5 Years• January 2012 – December 2016
(http://httparchive.org) top 1000 sites
![Page 5: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/5.jpg)
INTRODUCING HTTP/2
Shortcoming – Current Web• Concurrent connection limit• Head of line blocking• TCP slow start• Latency – page load time
![Page 6: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/6.jpg)
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)
![Page 7: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/7.jpg)
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
![Page 8: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/8.jpg)
INTRODUCING HTTP/2
TCP Slow Start• TCP does not use the
full bandwidth capacity from start
• TCP probes network to find available capacity
![Page 9: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/10.jpg)
INTRODUCING HTTP/2
What is 20ms of Latency?
(RTT = Round-trip time)
![Page 11: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/12.jpg)
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;}
![Page 13: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/13.jpg)
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" />
![Page 14: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/14.jpg)
INTRODUCING HTTP/2
Domain Sharing• Work around the max connection
restriction• Minimal overhead for DNS lookup
![Page 15: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/15.jpg)
INTRODUCING HTTP/2Problems 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
![Page 16: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/17.jpg)
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
![Page 18: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/19.jpg)
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)
![Page 20: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/20.jpg)
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
restrictionshttps://http2.github.io/http2-spec/#BadCipherSuites
![Page 21: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/21.jpg)
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)
![Page 22: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/22.jpg)
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
![Page 23: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/23.jpg)
INTRODUCING HTTP/2
DEMO
![Page 24: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/24.jpg)
INTRODUCING HTTP/2
Am I Using HTTP/2?
IE
Chrome
![Page 25: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/25.jpg)
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+– CURLGoogle, Facebook, Twitter and many more are using HTTP/2 already
HTTP/2 is used by 11.9% of all websites (Jan. 2017 http://w3techs.com)
![Page 26: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/27.jpg)
INTRODUCING HTTP/2
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
![Page 28: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/28.jpg)
INTRODUCING HTTP/2
Header Compression (HPACK)
![Page 29: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/29.jpg)
INTRODUCING HTTP/2
DEMO
![Page 30: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/30.jpg)
INTRODUCING HTTP/2
How to Troubleshoot - Chrome• Net Internals console in Chrome• chrome://net-internals/#http2
![Page 31: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/31.jpg)
INTRODUCING HTTP/2How to Troubleshoot - Wireshark
• Export symmetric session keys to a file• Load it with Wireshark
– Preferences->Protocols->SSL• Works with Chrome
and Firefox
C:\> set SSLKEYLOGFILE = %userprofile%\desktop\sslkeylog.log$ export SSLKEYLOGFILE=~/Desktop/sslkeylog.log
![Page 32: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/32.jpg)
INTRODUCING HTTP/2
How to Troubleshoot - Wireshark
![Page 33: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/33.jpg)
INTRODUCING HTTP/2
How to Troubleshoot - Wireshark
![Page 34: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/34.jpg)
INTRODUCING HTTP/2
How to Troubleshoot - Wireshark
![Page 35: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/35.jpg)
INTRODUCING HTTP/2
DEMO
![Page 36: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/36.jpg)
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.PushPromisestring path = Request.ApplicationPath;Response.PushPromise(path + "/Images/1.png");Response.PushPromise(path + "/Images/2.png");
![Page 37: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/37.jpg)
INTRODUCING HTTP/2
DEMO
![Page 38: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/38.jpg)
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
![Page 39: Introduction to HTTP/2](https://reader031.fdocuments.us/reader031/viewer/2022021422/58d127841a28abe3298b4769/html5/thumbnails/39.jpg)
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 // [email protected] // www.idoflatow.net/downloads