Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP/2.0 101 Introduction

HTTP/2.0 101 Introduction

Nach 16 Jahren wurde jetzt die neue Version des HTTP Protokolls fertig gestellt. Die Unterstützung durch Browser und Webserver wächst stetig. In diesem Talk wird erklärt, wie HTTP und Browser generell funktionieren, worum es bei HTTP/2.0 eigentlich geht, was das für deine Webanwendungen bedeutet, und wie es deiner Anwendung zu besserer Performance verhelfen kann.

Bastian Hofmann

October 16, 2015
Tweet

More Decks by Bastian Hofmann

Other Decks in Programming

Transcript

  1. HTTP/2.0 101 Introduction @BastianHofmann

  2. HTTP/2.0 101 Introduction 101 Switching Protocols @BastianHofmann

  3. None
  4. None
  5. None
  6. Questions? Ask

  7. http://speakerdeck.com/u/bastianhofmann

  8. https://www.flickr.com/photos/duncan/3171592427/

  9. https://commons.wikimedia.org/wiki/File:Internet1.jpg#/media/File:Internet1.jpg

  10. https://www.flickr.com/photos/neilsingapore/3567378586/

  11. HTTP/0.9 http://www.w3.org/Protocols/HTTP/AsImplemented.html 1991

  12. HTTP/1.0 https://tools.ietf.org/html/rfc1945 1996

  13. HTTP/1.1 http://tools.ietf.org/html/rfc2616 1999

  14. HTTP/1.1 http://tools.ietf.org/html/rfc2616 http://tools.ietf.org/html/rfc7230 http://tools.ietf.org/html/rfc7231 http://tools.ietf.org/html/rfc7232 http://tools.ietf.org/html/rfc7235 http://tools.ietf.org/html/rfc7234 http://tools.ietf.org/html/rfc7233 2014

  15. https://www.flickr.com/photos/offshore/1433329174/

  16. None
  17. http://www.impressivewebs.com/importance-of-website- performance-sources/

  18. Average page size

  19. Average asset count

  20. http://www.soasta.com/blog/page-bloat-average-web-page-2-mb/

  21. http://httparchive.org/trends.php

  22. The internet gets slower and slower

  23. https://www.flickr.com/photos/91026431@N05/8497636527/

  24. Slow connections

  25. High latency

  26. https://flic.kr/p/KpBcj

  27. It’s hard work to keep a page fast

  28. Lots of hacks around HTTP needed

  29. It needs to get better

  30. SPDY

  31. HTTP/2 http://tools.ietf.org/html/rfc7540 http://tools.ietf.org/html/rfc7541 2015

  32. New possibilities for web applications

  33. Increased performance

  34. Old truths may not be valid anymore

  35. HTTP/1.1 in detail

  36. The anatomy of a page load

  37. None
  38. Every request one TCP connection

  39. User enters URL

  40. DNS lookup

  41. TCP connection

  42. TLS handshake

  43. This already takes time

  44. Already some Optimizations

  45. DNS caching

  46. Connection Keep Alive

  47. TLS optimizations

  48. https://istlsfastyet.com/

  49. None
  50. Finally: HTTP

  51. HTTP request

  52. GET / HTTP/1.1 Host: www.researchgate.net

  53. GET /home HTTP/1.1 Host: www.researchgate.net pragma: no-cache dnt: 1 accept-encoding:

    gzip, deflate, sdch accept-language: de-DE,de;q=0.8,en- US;q=0.6,en;q=0.4 user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2478.0 Safari/537.36 accept: text/html,application/xhtml +xml,application/xml;q=0.9,image/webp,*/*;q=0.8 cache-control: no-cache cookie: …
  54. https://www.flickr.com/photos/40987321@N02/5580348753/

  55. HTTP response

  56. HTTP/1.1 200 OK Content-Type: text/plain Content

  57. HTTP/1.1 200 OK Date: Sun, 16 Aug 2015 11:21:31 GMT

    Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Cache-Control: must-revalidate, no-cache, no-store, post-check=0, pre-check=0, private X-Correlation-Id:... expires: Thu, 19 Nov 1981 08:52:00 GMT pragma: no-cache X-UA-Compatible: IE=Edge X-Frame-Options: SAMEORIGIN P3P: CP="..." X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block Strict-Transport-Security: max-age=7200 Content-Security-Policy: … Content-Encoding: gzip
  58. HTTP/2

  59. For the user it works the same

  60. No changes in Headers, Semantics etc

  61. GET / HTTP/2.0 Host: www.researchgate.net HTTP/2.0 200 OK Content-Type: text/plain

    Content
  62. Changes on transport level

  63. TLS only

  64. Binary instead of textual

  65. Header compression

  66. Smaller requests and responses

  67. Less roundtrips

  68. Headers are received early (1st packet)

  69. HTTP Response body

  70. HTML response

  71. DOM parsing

  72. Rendering

  73. Asset fetching

  74. Applying CSS

  75. Executing JS

  76. https://www.flickr.com/photos/hangdog/10991275/

  77. Blocking HTML rendering

  78. CSS

  79. JS

  80. CSS triggers repaints

  81. JS can manipulate the DOM

  82. JS can access attributes set by CSS

  83. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" >

    <link href="profile.css" > <script src="library.js" /> <script src="app.js" /> <script> // some JS </script> </head> <body>
  84. <script src="demo_async.js" async></script>

  85. HTTP/1.1

  86. Every request one TCP connection

  87. Concurrent connection limits

  88. Network congestion

  89. http://www.browserscope.org/?category=network

  90. Domain sharding

  91. http://c5.rgstatic.net/profile.css http://c4.rgstatic.net/icon.png

  92. Shards should be persistent

  93. Additional handshakes and connections

  94. Network congestion

  95. TCP Slow Start

  96. https://de.wikipedia.org/wiki/Transmission_Control_Protocol#/media/File:TCPSlowStartundCongestionAvoidance.svg

  97. Ideal number of shards

  98. https://codeascraft.com/2014/02/19/reducing-domain- sharding/

  99. Page sizes

  100. Less content

  101. GZIP

  102. Image compression

  103. Minification

  104. JS

  105. CSS

  106. HTML

  107. Debugging problems

  108. None
  109. Sourcemaps

  110. Less requests

  111. Concatenation

  112. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/javascript/combo/lib/yui3/ array-extras/array-extras-min.js&lib/yui3/oop/oop-min.js&lib/yui3/attribute-core/attribute- core-min.js&lib/yui3/event-custom-base/event-custom-base-min.js&lib/yui3/event-custom- complex/event-custom-complex-min.js&lib/yui3/attribute-observable/attribute-observable- min.js&lib/yui3/attribute-extras/attribute-extras-min.js&lib/yui3/attribute-base/attribute-base- min.js&lib/yui3/attribute-complex/attribute-complex-min.js&lib/yui3/base-core/base-core- min.js&lib/yui3/base-observable/base-observable-min.js&lib/yui3/base-base/base-base- min.js&lib/yui3/pluginhost-base/pluginhost-base-min.js&lib/yui3/pluginhost-config/pluginhost- config-min.js&lib/yui3/base-pluginhost/base-pluginhost-min.js&lib/yui3/classnamemanager/ classnamemanager-min.js&lib/yui3/dom-core/dom-core-min.js&lib/yui3/dom-base/dom-base-

    min.js&lib/yui3/selector-native/selector-native-min.js&lib/yui3/selector/selector-min.js&lib/ yui3/node-core/node-core-min.js
  113. https://c5.rgstatic.net/c/a9b943a25d126865806885d2fd94b5f9/mainbundle.js

  114. Spritemaps

  115. None
  116. How to bundle

  117. Over fetching

  118. 90% CSS unused

  119. Cache invalidation

  120. HTTP/2

  121. Only 1 connection

  122. Fully multiplexed

  123. No domain sharding needed

  124. Low overhead for a request

  125. No concatenation needed

  126. Better cache hit ratio

  127. More granular loading

  128. Less development overhead

  129. None
  130. https://www.flickr.com/photos/ksayer/5614813296/

  131. Critical rendering path

  132. None
  133. What is visible?

  134. None
  135. What is critical?

  136. HTTP/1.1

  137. Inline critical assets

  138. Either inline always

  139. Caching?

  140. First request

  141. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <styles> … your

    critical css </styles> </head> <body> <div>content</div> load main.css async set cookie that other css was loaded </body> </html>
  142. Subsequent request (if Cookie set)

  143. HTTP/1.1 200 OK Content-Type: text/html <html> <head> <link href="main.css" >

    // loaded from cache </head> <body> <div>content</div> </body> </html>
  144. Flushing critical stuff early

  145. Traditional approach

  146. Browser Server GET css & js HTTP/1.1 200 OK Content-Type:

    text/html <html> <head><link ..><script ..> GET /foo.html </head><body></body></html>
  147. HTTP supports streaming

  148. Browser Server GET /foo.html <body></body> </html> HTTP/1.1 200 OK Content-Type:

    text/html <html> <head><link ..><script ..></head> GET css & js
  149. None
  150. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Controlling_DNS_prefetching

  151. https://developer.mozilla.org/en-US/docs/Web/HTTP/ Link_prefetching_FAQ

  152. Problems

  153. Headers are already sent

  154. Redirects

  155. None
  156. Proxies, servers, load balancers may buffer content

  157. Browsers may wait before starting to render HTML

  158. AJAX?

  159. JSON/XML

  160. None
  161. Caching what assets are needed

  162. GET /literature.AddPublicationsDialog HTTP/1.1 200 OK Content-Type: application/json { "data": {...},

    "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }
  163. localStorage.setItem( "literature.AddPublicationsDialog", { "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }

    );
  164. None
  165. None
  166. HTTP/2

  167. Server push

  168. Prioritize critical assets

  169. Browser Server Push CSS & JS HTTP/2.0 200 OK Content-Type:

    text/html <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
  170. spdy.createServer(options, function(req, res) { // push JavaScript asset (/main.js) to

    the client res.push( '/main.js', {'content-type': ‚application/javascript'}, function(err, stream) { stream.end('alert("hello from push stream!")'); } ); // write main response body and terminate stream res.end( 'Hello World! <script src=„/main.js"></script>' ); }).listen(443); https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
  171. Headers X-Associated-Content

  172. Automated learning

  173. Great

  174. When can I use it?

  175. Browser support

  176. http://caniuse.com/#feat=http2

  177. http://caniuse.com/#search=spdy

  178. Server support

  179. Nginx http://nginx.org/en/docs/http/ngx_http_v2_module.html

  180. https://github.com/icing/mod_h2 Apache httpd

  181. Performance best practices will evolve

  182. Stay up to date

  183. Expect more frequent HTTP protocol iterations

  184. http://twitter.com/BastianHofmann http://lanyrd.com/people/BastianHofmann http://speakerdeck.com/u/bastianhofmann mail@bastianhofmann.de