Introduction to HTTP/2

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 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 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 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


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

GETPOSTPUTDELETE

HEADOPTIONSTRACECONNECT

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

restrictionshttps://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.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/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?

IE

Chrome

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 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 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


Header Compression (HPACK)

INTRODUCING HTTP/2


DEMO

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%\desktop\sslkeylog.log$ export SSLKEYLOGFILE=~/Desktop/sslkeylog.log

INTRODUCING HTTP/2



INTRODUCING HTTP/2



INTRODUCING HTTP/2



INTRODUCING HTTP/2


DEMO

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");

INTRODUCING HTTP/2


DEMO

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 // [email protected] // www.idoflatow.net/downloads

Date post:	16-Apr-2017
Category:	Technology
Upload:	ido-flatow
View:	226 times
Download:	1 times

Introduction to HTTP/2

Technology