http2 is here! and why the web needs it
TRANSCRIPT
![Page 1: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/1.jpg)
HTTP/2 is here!And why the web needs it
Nilesh NaikTata Consultancy Services
![Page 2: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/2.jpg)
• How we got there• Limitations of HTTP/1.1• What’s new in HTTP/2• Best practices of today are anti-patterns in
HTTP/2• Impact on developer community• Current implementations• What’s next
What’s in here -
![Page 3: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/3.jpg)
The web has changed significantly since then
1991HTTP/0.9
1996HTTP/1.0
1999HTTP/1.1
2015HTTP/2
HTTP Timeline
2009SPDY
![Page 4: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/4.jpg)
HTTP 0.9 (1991)
GET /index.htm
<html><head> ….
</head><body>
…</body>
</html>
![Page 5: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/5.jpg)
HTTP 1.0 (1996)
GET /index.htm HTTP/1.0User-Agent: mozillaAccept: text/html
HTTP/1.0 200 OK<html>
<head> ….
</head><body>
…</body>
</html>
![Page 6: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/6.jpg)
HTTP 1.1 (1999)
GET /index.htm HTTP/1.0User-Agent: mozillaAccept: text/htmlConnection: keep-alive
HTTP/1.0 200 OK<html>
<head> ….
</head><body>
…</body>
</html>
![Page 7: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/7.jpg)
First Web Page
![Page 8: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/8.jpg)
Early 90’s – McDonald’s
Single Request – Response modelNot much interaction
![Page 9: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/9.jpg)
MSN
![Page 10: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/10.jpg)
Early 90’s
Most of the content was sent in response to single request
Minimal or no JS
![Page 11: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/11.jpg)
Modern Web page - Amazon
- 308 requests, 8.1 MB data
![Page 12: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/12.jpg)
Modern Web page
External resources requested Multiple requests, Multiple response
![Page 13: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/13.jpg)
Modern Web page - Ads
Much of the site isnt about content, its about Ads.
![Page 14: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/14.jpg)
HTTP abused!
![Page 15: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/15.jpg)
And yes, every TCP connection is closed with a 3-way connection too!
Open connection: 3-way handshake
SYNx= rand()
SYN ACKX+1 y= rand()
ACKx+1 y+1
Application Data
0 ms
28 ms
56 ms
84 ms
![Page 16: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/16.jpg)
More resource intensive than ever before HTTP 1.1 was not built to handle that kind of load HTTP 1.1 does not use TCP optimally
800K Transfer size
2300K Transfer size
80 Objects
100 Objects
In the last 4 years..
![Page 17: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/17.jpg)
HTTP requests are expensive!
Workarounds
![Page 18: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/18.jpg)
SpritingSpriting
![Page 19: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/19.jpg)
Spriting
Text
To get just one flag…
Browser must downloadand encode the whole image
Spriting
![Page 20: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/20.jpg)
Spriting - Contd.
Makes development harder Impacts caching Every change would require a fresh download Larger files takes longer to download and display on browser
![Page 21: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/21.jpg)
Inlining Resources
![Page 22: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/22.jpg)
Inlining – Contd. data: urls instead of sprites
Resources can’t be cached independently Development isn't easy
![Page 23: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/23.jpg)
Concatenation
Merge multiple JavaScript/CSS files into one BIG file
Larger files to downloadand parse
![Page 24: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/24.jpg)
Larger files to downloadand parse
Whole bundle is invalidated if a single file changes
Concatenation – contd.
Too much data when only a little is needed Too much to reload when a change is needed Annoyance for developers Impacts caching
![Page 25: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/25.jpg)
Domain shardingBrowsers use 6-8 connections per host
![Page 26: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/26.jpg)
Domain sharding – contd.Sites use many host names to allow more connection
index.html
style.css
image.png
![Page 27: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/27.jpg)
Domain sharding on Single Server
domain.com/index.html
images.domain.com/image.png
styles.domain.com/styles.css
![Page 28: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/28.jpg)
Domain sharding – bbc.co.uk
www.bbc.co.ukstatic.bbc.co.uknav.files.bbci.co.ukhomepage.files.bbci.co.uk
Still suffers from head of blocking Every new connection takes up resources Every new host needs a name lookup*http://yslow.org/
![Page 29: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/29.jpg)
Useful, but are really just Band-aids Annoying for the developers Adds a layer of tools Hampers caching Downloads too much
Hacks
![Page 30: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/30.jpg)
Ideal Protocol Interaction
Send minimal data to the server
Download minimal data needed
Extra data -> more time to transfer, adds latency (especially on mobile networks)
![Page 31: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/31.jpg)
HTTP/1.1
HTTP/1.x is “chatty”
Several round-trips, adds latency
![Page 32: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/32.jpg)
![Page 33: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/33.jpg)
Latency vs Bandwidth
![Page 34: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/34.jpg)
Announced in 2009
Target 50% reduction in PLT
Initial tests - 55% faster
On track to de facto standard
![Page 35: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/35.jpg)
Enter HTTP/2 - RFC 7540
Built on top of SPDY
One TCP Connection
Improved end-user perceived latency
Binary framing layer
![Page 36: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/36.jpg)
Enter HTTP/2
![Page 37: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/37.jpg)
Connection
Stream
DATA HEADERRequest message
Response messageHEADER HEADERDATA
Stream
PRIORITY HEADERRequest message
Response messageHEADER DATA
…
![Page 38: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/38.jpg)
An HTTP 1.x connection
Response<HTML> <HEAD> -- </HEAD> <BODY> -- </BODY></HEAD>
RequestGET /index.html HTTP 1.1User-Agent: mozillaAccept: text/html
TCP Connection
![Page 39: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/39.jpg)
An HTTP/2 connection
Response000010001101100001000000100101
Request000100010100100100001001000
TCP Connection
![Page 40: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/40.jpg)
Demo
• https://http2.akamai.com/demo
![Page 41: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/41.jpg)
Multiplexing
GET /foo
200 OK
GET /bar
200 OK 200 OK
200 OK
200 OK
200 OK
GET /fooGET /bar
GET /baz
GET /saz
GET /taz
GET /taz
Head of Line Blocking
No QueuingOne connectionMany requestsOut of orderinterleaved
HTTP/1.1 HTTP/2
Still serializedLong download/long think time can block other requests
![Page 42: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/42.jpg)
Multiplexing – contd.
![Page 43: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/43.jpg)
Multiplexing – network graph
![Page 44: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/44.jpg)
Header Compression
Unnecessary metadata (headers) add up quickly
100+ requests, with few KB of headers -> hundreds of KB’s!
Bytes are slow and expensive to transfer
![Page 45: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/45.jpg)
Header Duplication
![Page 46: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/46.jpg)
Header Duplication – contd.
![Page 47: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/47.jpg)
Header Duplication – contd.
![Page 48: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/48.jpg)
Header Duplication – contd.
![Page 49: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/49.jpg)
Header Duplication – contd.
Four requests 2,596 bytes total 1,797 redundant bytes
![Page 50: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/50.jpg)
HPACK – Header Compression - RFC 7541
Compresses HeadersAvoids sending duplicated/repeated headers
![Page 51: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/51.jpg)
Server push
Similar to Inlining Resources pushed directly to client’s cache Opportunity for servers to become smarter
– Don’t push on every request– Push based upon observed traffic pattern
GET / index.html
200 OK
GET /style.css
200 OK
GET / index.html
200 OK
200 OK
Browser can reject push
![Page 52: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/52.jpg)
Implementations
H2O
mod_h2 (Apache)
Server push – Cache DigestGET / foo
Push /foo.css
200 OK
CACHE_DIGEST
Process requestDigest of /main.js & /main.css
<html><script src="/main.js"><link rel="stylesheet" href="/main.css"><link rel=STYLESHEET href="/foo.css"><body>… generated response …
![Page 53: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/53.jpg)
Priortization – HTTP/1.x
![Page 54: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/54.jpg)
Priortization – HTTP/1.x
In HTTP/1, Prioritization is a browser heuristic • CSS and images first, followed by images
![Page 55: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/55.jpg)
Priortization – HTTP/2
![Page 56: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/56.jpg)
Priortization – HTTP/2
In HTTP/2, it’s hinted by the client, determined by the server
![Page 57: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/57.jpg)
Stream Priority
Stream Weight: <int> 1..256
• Lower the number, higher the priority
![Page 58: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/58.jpg)
Stream Dependency
Stream
Root
Weight: 15
Dependency: {Stream id}
• Streams aren't isolated, they can be dependent on others
• If no dependency then id set to zero.
![Page 59: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/59.jpg)
Dependency Tree
5
5
7
4
![Page 60: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/60.jpg)
HTTP/2 User ImpactFaster page loads
More response loading
More HTTPS
![Page 61: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/61.jpg)
Impact on developers
![Page 62: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/62.jpg)
Does not modify the semantics
![Page 63: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/63.jpg)
Uses binary format instead of text
Debugging can be a problemNo more telnetWhy?
![Page 64: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/64.jpg)
TLS Overhead
• World is moving towards https already
• ALPN makes impact minimal• Cost of certificates and
administrative overhead
![Page 65: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/65.jpg)
![Page 66: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/66.jpg)
Browser support
![Page 67: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/67.jpg)
![Page 68: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/68.jpg)
Hosting .NET Apps
IIS 10 on Windows 10Windows Server 2016Nginx
![Page 69: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/69.jpg)
Hosting Java Apps
Apache HTTP 2.4.17+Jetty 9.3+Tomcat 8.5
![Page 70: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/70.jpg)
Hosting Node Apps
node-http2node-spdyExpressJS 5.0
![Page 71: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/71.jpg)
HTTP/2 on JVMJDK 8 and upwards required
Include ALPN extensions in class path
Included in JDK 9
![Page 72: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/72.jpg)
Implementations
https://github.com/http2/http2-spec/wiki/Implementations
![Page 73: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/73.jpg)
HTTP/1.x workaround will hurt HTTP/2 perf
InliningSpriting
ConcatenatingSharding
![Page 74: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/74.jpg)
Case study
![Page 75: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/75.jpg)
What's next?
![Page 76: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/76.jpg)
QUICRuns on top of UDP
Goodness of SPDY and HTTP/2
No head of line blocking in QUIC!
QUIC TCP + TLS
New connection 100 ms
Repeat connnection 0 ms RTT
New connection 300 ms
Repeat connection 200 ms RTT
![Page 77: Http2 is here! And why the web needs it](https://reader036.vdocuments.us/reader036/viewer/2022062523/58a1b8691a28ab537c8b5c45/html5/thumbnails/77.jpg)
Thank you!
@NileshRaviNaik