HTTP/2.0 101 Introduction

HTTP/2.0 101 Introduction

After 16 years a new version of the HTTP protocol has now been finalized and wide support in browsers and web servers is coming quickly. In this talk I’ll explain how HTTP and browsers work in general and what you currently have to do to make your application as fast as possible. Based on this I’ll show what HTTP/2.0 is all about, what it changes and how it can help your application’s performance.

Ded87c77266697ee6981c2277bb97633?s=128

Bastian Hofmann

January 29, 2016
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 16.
  5. 30.
  6. 46.
  7. 50.

    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: …
  8. 54.

    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
  9. 55.
  10. 62.
  11. 71.
  12. 72.
  13. 78.

    CSS

  14. 79.

    JS

  15. 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>
  16. 86.
  17. 101.
  18. 103.
  19. 106.

    JS

  20. 107.

    CSS

  21. 108.
  22. 110.
  23. 111.
  24. 116.
  25. 117.
  26. 123.
  27. 132.
  28. 135.
  29. 137.
  30. 139.
  31. 140.
  32. 143.
  33. 145.

    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>
  34. 147.

    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>
  35. 150.

    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>
  36. 154.

    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
  37. 155.
  38. 156.
  39. 158.
  40. 160.
  41. 163.
  42. 164.
  43. 165.
  44. 167.

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

    "css": ["AddPublicationsDialog.css"], "js": ["AddPublicationsDialogView.js"], "html": ["addConferencePaperSelection.html"] }
  45. 169.
  46. 170.
  47. 171.
  48. 174.

    Browser Server Push CSS & JS :status: 200 Content-Type: text/html

    <html> <head><link ..><script ..> </head><body></body></html> GET /foo.html
  49. 175.

    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/
  50. 178.