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

[PNWPHP 2016] HTTP/2 and Asynchronous APIs

Davey Shafik
September 17, 2016

[PNWPHP 2016] HTTP/2 and Asynchronous APIs

HTTP/2 (H2) is coming, and along with it a whole new way of communicating over the web. Connection re-use, prioritization, multiplexing, and server push are just some of the features in H2.

In this talk we'll look at the HTTP/2 protocol, and at how we can use asynchronous request now with HTTP/1.x. We will also look at what asynchronous requests and H2 mean for your API and clients in the future.

Davey Shafik

September 17, 2016
Tweet

More Decks by Davey Shafik

Other Decks in Programming

Transcript

  1. H T T P/ 2 A N D A SY

    N C H R O N O U S A P I S
  2. D AV E Y S H A F I K

    • Developer • Author • Open Source Contributor • Release Manager for PHP 7.1 • @dshafik
  3. h tt p : / /d e v e l

    o p e r. a ka m a i .co m
  4. Let’s start a conversation about mental health in tech mhprompt.org

  5. H T T P/ 2 A KA : H 2

  6. None
  7. W H AT I S H T T P/ 2

    ? CC-BY: Marco Bellucci
  8. R F C 7 5 4 0 H Y P

    E RT E XT T R A N S F E R P R OTO CO L V E RS I O N 2
  9. R F C 7 5 4 1 H PA C

    K - H E A D E R CO M P R E SS I O N FO R H T T P/ 2
  10. C R E AT E D BY I E T

    F H T T P W O R K I N G G R O U P C H A I R E D BY A K A M A I ' S M A R K N OT T I N G H A M
  11. CC-BY: mrbill 1991 HTTP/0.9

  12. CC-BY: mrbill 1991 1996 HTTP/0.9 HTTP/1.0

  13. CC-BY: mrbill 1991 1996 1999 HTTP/0.9 HTTP/1.0 HTTP/1.1

  14. CC-BY: mrbill 1991 1996 1999 HTTP/0.9 HTTP/1.0 HTTP/1.1 2009 SPDY

  15. –J O H N N Y A P P L

    E S E E D CC-BY: mrbill 1991 1996 1999 HTTP/0.9 HTTP/1.0 HTTP/1.1 2015 HTTP/2 2009 SPDY
  16. B R O W S E R S U P

    P O RT
  17. B R O W S E R S U P

    P O RT • Chrome + Chrome Mobile • Firefox • IE 11 on Windows 10 • MS Edge • Safari (El Capitan/iOS 9) • Opera
  18. B I N A R Y I N ST E

    A D O F T E XT CC-BY: brett jordan
  19. F U L LY M U LT I P L

    E X E D CC-BY: vadikunc I N S T E A D O F O R D E R E D A N D B L O C K I N G
  20. C A N US E O N E CO N

    N E CT I O N 
 FO R PA R A L L E L R E Q U E STS CC-BY: Alosh Bennett
  21. US E S H E A D E R CO

    M P R E SS I O N CC-BY-SA: Magnus Hagdorn R E D U C E S O V E R H E A D
  22. S E R V E R P U S H

    I S S U P E R CO O L ( N O R E A L LY ) CC-BY-SA: Takeshi
  23. S E R V E R P U S H

    • Allows the server to proactively push assets like stylesheets and images to the client without them needing to parse the HTML page and make subsequent requests • Done by pushing the assets into the client cache, avoiding the roundtrip necessary to pull them up once the client makes the request
  24. W H AT D O E S H T T

    P/ 2 M E A N F O R M Y A P P L I C AT I O N ?
  25. T R A N S PA R E N T

    CC-BY-SA: Patty H A N D L E D B Y N G I N X / A PA C H E
  26. S O W H AT ’ S T H E

    P O I N T ?
  27. H T T P/ 1 . X S U C

    K S CC-BY: Flóra Soós
  28. H T T P/ 1 . X S U C

    K S • Minify + Concat JavaScript and CSS • Inlining small JavaScript and CSS • Using image sprites • Using data: URIs • Domain sharding
  29. T H E S E T H I N G

    S A R E A L L " C L E V E R " H AC K S CC-BY: Matt Biddulph
  30. R E M E M B E R T H

    I S ? CC-BY: Alosh Bennett C A N US E O N E CO N N E CT I O N 
 FO R PA R A L L E L R E Q U E STS
  31. U P LO A D I N G M U

    LT I P L E I M A G E S CC-BY: John Trainor
  32. S E R I A L U P LO A

    D S Ȑ
  33. S E R I A L U P LO A

    D S Ȑ
  34. S E R I A L U P LO A

    D S Ȑ
  35. S E R I A L U P LO A

    D S Ȑ 
  36. S E R I A L U P LO A

    D S Ȑ 
  37. S E R I A L U P LO A

    D S Ȑ  
  38. S E R I A L U P LO A

    D S Ȑ   
  39. CO N CU R R E N T Ȑ 

  40. CO N CU R R E N T Ȑ 

  41. CO N CU R R E N T Ȑ 

  42. CO N CU R R E N T Ȑ 

  43. CO N CU R R E N T Ȑ 

  44. A P I S

  45. F E TC H I N G A B LO

    G P O ST + CO M M E N TS CC-BY: John Trainor
  46. Ȑ

  47. Ȑ

  48. Ȑ GET /post/1

  49. Ȑ GET /post/1 200 OK application/json

  50. { "type": "post", "id": "1", "title": "JSON API paints my

    bikeshed!", "tags": ["json", "api", "relationships"], "author": "http://example.com/posts/1/author", "comments": "http://example.com/posts/1/comments" }
  51. Ȑ

  52. Ȑ

  53. Ȑ GET /posts/1/comments

  54. Ȑ GET /posts/1/comments 200 OK application/json

  55. [ "http://example.org/post/1/comment/1", "http://example.org/post/1/comment/2", "http://example.org/post/1/comment/3", "http://example.org/post/1/comment/4" ]

  56. Ȑ

  57. Ȑ

  58. Ȑ GET /post/example/comments/1

  59. Ȑ GET /post/example/comments/ 200 OK application/json 1

  60. 2 Ȑ GET /post/example/comments/ 200 OK application/json 1

  61. 2 3 Ȑ GET /post/example/comments/ 200 OK application/json 1

  62. 2 3 4 Ȑ GET /post/example/comments/ 200 OK application/json 1

  63. { "type": "comment", "id": "1", "title": "FIRST!", "author": "http://example.com/post/1/comment/1/author" }

  64. 6 requests (possibly connections)

  65. 14 requests (possibly connections)

  66. M U LT I P L E X E D

    Ȑ
  67. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3
  68. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1
  69. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1 GET /post/example/comments/2
  70. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1 GET /post/example/comments/2 200 OK application/json
  71. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1 GET /post/example/comments/2 200 OK application/json 200 OK application/json
  72. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1 GET /post/example/comments/2 200 OK application/json 200 OK application/json 200 OK application/json
  73. CO D E

  74. $numRequests = 378;

  75. None
  76. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i); curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 1 . 1 : SY N C H R O N O US
  77. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i); curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 1 . 1 : SY N C H R O N O US
  78. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i); curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 1 . 1 : SY N C H R O N O US
  79. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i); curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 1 . 1 : SY N C H R O N O US
  80. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i); curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 1 . 1 : SY N C H R O N O US
  81. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i); curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 1 . 1 : SY N C H R O N O US
  82. 4 7 . 6 7 
 s e co n

    d s CC-BY: Hernán Piñera
  83. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i);
 curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 2 : SY N C H R O N O US
  84. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i);
 curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0; H T T P/ 2 : SY N C H R O N O US
  85. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i);
 curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 2 : SY N C H R O N O US
  86. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i);
 curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0; H T T P/ 2 : SY N C H R O N O US
  87. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i);
 curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } H T T P/ 2 : SY N C H R O N O US
  88. $url = 'https://http2.akamai.com/demo/tile-%d.png'; for ($i = 0; $i <= $numRequests;

    $i++) { $ch = curl_init();
 $opts[CURLOPT_URL] = sprintf($url, $i);
 curl_setopt_array($ch, $opts); curl_exec($ch); curl_close($ch); } $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0; H T T P/ 2 : SY N C H R O N O US
  89. 6 2 . 1 9 
 s e co n

    d s CC-BY-NC: Scott Beckner
  90. $mh = curl_multi_init();
 $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0;

    $i <= $numRequests; $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d');
 curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } H T T P/ 1 . 1 : CO N CU R R E N T
  91. $mh = curl_multi_init();
 $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0;

    $i <= $numRequests; $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d');
 curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } H T T P/ 1 . 1 : CO N CU R R E N T
  92. $mh = curl_multi_init();
 $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0;

    $i <= $numRequests; $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d');
 curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } H T T P/ 1 . 1 : CO N CU R R E N T
  93. $mh = curl_multi_init();
 $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0;

    $i <= $numRequests; $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d');
 curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } H T T P/ 1 . 1 : CO N CU R R E N T
  94. H T T P/ 1 . 1 : CO N

    CU R R E N T ( CO N T. ) do { $exec = curl_multi_exec($mh, $running); } while ($exec == CURLM_CALL_MULTI_PERFORM); while ($running && $exec == CURLM_OK) { $ready = curl_multi_select($mh); if ($ready != -1) { do { $exec = curl_multi_exec($mh, $running);
 } while ($exec == CURLM_CALL_MULTI_PERFORM); } }
  95. 8 . 6 6 
 s e co n d

    s
  96. $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0; $i <= $numRequests;

    $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d'); curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } H T T P/ 2 : M U LT I P L E X E D $mh = curl_multi_init();
  97. $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0; $i <= $numRequests;

    $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d'); curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } H T T P/ 2 : M U LT I P L E X E D $mh = curl_multi_init(); $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0;
  98. $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0; $i <= $numRequests;

    $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d'); curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } $mh = curl_multi_init(); $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0; curl_multi_setopt(
 $mh, 
 CURLMOPT_PIPELINING, 
 CURLPIPE_MULTIPLEX
 );
  99. $url = 'https://http2.akamai.com/demo/tile-%d.png';
 for ($i = 0; $i <= $numRequests;

    $i++) { $handles[] = $ch = curl_init(); $opts[CURLOPT_URL] = sprintf($url, '%d'); curl_setopt_array($ch, $opts); curl_multi_add_handle($mh, $ch); } $mh = curl_multi_init(); $opts[CURLOPT_HTTP_VERSION] = HTTP_VERSION_2_0; curl_multi_setopt(
 $mh, 
 CURLMOPT_PIPELINING, 
 CURLPIPE_MULTIPLEX
 );
  100. H T T P/ 2 : M U LT I

    P L E X E D ( CO N T. ) do { $exec = curl_multi_exec($mh, $running); } while ($exec == CURLM_CALL_MULTI_PERFORM); while ($running && $exec == CURLM_OK) { $ready = curl_multi_select($mh); if ($ready != -1) { do { $exec = curl_multi_exec($mh, $running);
 } while ($exec == CURLM_CALL_MULTI_PERFORM); } }
  101. 2 . 1 4 
 s e co n d

    s CC-BY: motoracereports
  102. H T T P/ 2 N E G OT I

    AT I O N CC-BY-ND: dhendrix73
  103. B A C KW A R D S CO M

    PAT I B I L I TY
  104. P R OTO CO L I D E N T

    I F I E RS • h2 — HTTP/2 over TLS, negotiated via ALPN (Application-Layer Protocol Negotiation) • h2c — HTTP/2 over TCP (plain text), uses an HTTP/1.1 request with a 101 Switching Protocols status response if supported
  105. – W I K I P E D I A

    /A P P L I C AT I O N - L AY E R _ P R OTO CO L _ N E G OT I AT I O N Application-Layer Protocol Negotiation (ALPN) is a Transport Layer Security (TLS) extension for application layer protocol negotiation. ALPN allows the application layer to negotiate which protocol should be performed over a secure connection in a manner which avoids additional round trips and which is independent of the application layer protocols. It is used by HTTP/2. […] On July 11, 2014, ALPN was published as RFC 7301
  106. H 2 C U P G R A D E

    N E G OT I AT I O N > GET / HTTP/1.1 > Host: server.example.com > Connection: Upgrade, HTTP2-Settings > Upgrade: h2c > HTTP2-Settings: <base64url SETTINGS payload> < HTTP/1.1 101 Switching Protocols < Connection: Upgrade < Upgrade: h2c < < [ HTTP/2 connection ...
  107. H 2 C U P G R A D E

    N E G OT I AT I O N ( CO N T. ) • May be an OPTIONS request if concurrency of multiple requests is important • May be any request type (e.g. PUT/POST/GET/HEAD/DELETE) but any body must be sent in it's entirety before HTTP/2 can start • A server must ignore an "h2" token in an Upgrade header field. Presence of a token with "h2" implies HTTP/2 over TLS, which is instead negotiated via TLS-ALPN • It must include a settings payload with the initial request
  108. A L L B R O W S E RS

    R E Q U I R E T LS FO R H T T P/ 2 CC-BY: Jason Baker
  109. D I R E CT CO N N E CT

    W I T H H T T P/ 2
  110. P R I O R K N O W L

    E D G E • It is possible to set up a connection with HTTP/1.1 or ALPN negotiation when prior knowledge of HTTP/2 is known • Performance enhancement • Client/Server must send the HTTP/2 connection prefix • Not supported in curl yet
  111. S E R V E R P US H CC-BY:

    Steven Depolo
  112. M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1 GET /post/example/comments/2 200 OK application/json 200 OK application/json 200 OK application/json
  113. ST I L L M A K I N G

    S U B - R E Q U E STS
  114. { "type": "post", "id": "1", "title": "JSON API paints my

    bikeshed!", "tags": ["json", "api", "relationships"], "author": { "type": "author", "id": 1, "name": "Davey Shafik", "twitter": "@dshafik", "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" }, "comments": [ { "type": "comment", "id": "1", "content": "FIRST!", "author": { "type": "author", "id": 2, "name": "Jill Random", "gravatar": "706b16b2fb732ab6079a10fea61d078b" } }, { "type": "comment", "id": "2", "content": "second", "author": { "type": "author", "id": 3, "name": "John Person", "gravatar": "8e2279479945ca4778eb3cb8d88cda58" } }, { "type": "comment", "id": "3", "content": "third", "author": { "type": "author", "id": 1, "name": "Davey Shafik", "twitter": "@dshafik", "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" } }, { "type": "comment", "id": "4", "content": "fourth", "author": { "type": "author", "id": 2, "name": "Jill Random", "gravatar": "706b16b2fb732ab6079a10fea61d078b" } } ] }
  115. { "type": "post", "id": "1", "title": "JSON API paints my

    bikeshed!", "tags": ["json", "api", "relationships"], "author": { "type": "author", "id": 1, "name": "Davey Shafik", "twitter": "@dshafik", "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" }, "comments": [ { "type": "comment", "id": "1",
  116. { "type": "post", "id": "1", "title": "JSON API paints my

    bikeshed!", "tags": ["json", "api", "relationships"], "author": { "type": "author", "id": 1, "name": "Davey Shafik", "twitter": "@dshafik", "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" }, "comments": [ { "type": "comment", "id": "1",
  117. "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" }, "comments": [ { "type": "comment", "id": "1",

    "content": "FIRST!", "author": { "type": "author", "id": 2, "name": "Jill Random", "gravatar": "706b16b2fb732ab6079a10fea61d078b" } }, { "type": "comment", "id": "2",
  118. } }, { "type": "comment", "id": "3", "content": "third", "author":

    { "type": "author", "id": 1, "name": "Davey Shafik", "twitter": "@dshafik", "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" } }, { "type": "comment", "id": "4",
  119. } }, { "type": "comment", "id": "3", "content": "third", "author":

    { "type": "author", "id": 1, "name": "Davey Shafik", "twitter": "@dshafik", "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" } }, { "type": "comment", "id": "4",
  120. } }, { "type": "comment", "id": "4", "content": "fourth", "author":

    { "type": "author", "id": 2, "name": "Jill Random", "gravatar": "706b16b2fb732ab6079a10fea61d078b" } } ] }
  121. Ȑ

  122. Ȑ

  123. Ȑ GET /post/1

  124. Ȑ GET /post/1 200 OK application/json

  125. GET /post/1/comments Ȑ GET /post/1 200 OK application/json

  126. GET /post/1/comments GET /post/1/comment/1 Ȑ GET /post/1 200 OK application/json

  127. Ȑ GET /post/1/comments GET /post/1/comment/1

  128. Ȑ GET /post/1/comment/2 GET /post/1/comment/3 GET /post/1/comment/4 GET /post/1/comments GET

    /post/1/comment/1
  129. Ȑ GET /post/1/comment/2 GET /post/1/comment/3 GET /post/1/comment/4 GET /post/1/comment/1/author GET

    /post/1/comment/2/author GET /post/1/comment/3/author GET /post/1/comment/4/author GET /post/1/comments GET /post/1/comment/1
  130. Ȑ GET /post/1/comment/2 GET /post/1/comment/3 GET /post/1/comment/4 GET /post/1/comment/1/author GET

    /post/1/comment/2/author GET /post/1/comment/3/author GET /post/1/comment/4/author GET /post/1/comment/1/author/avatar.png GET /post/1/comment/2/author/avatar.png GET /post/1/comment/3/author/avatar.png GET /post/1/comment/4/author/avatar.png GET /post/1/comments GET /post/1/comment/1
  131. CSS /J S M I N I F I C

    AT I O N I S U N E C E SS A R Y CC-BY: Patrick Metzdorf G Z I P CO M P R E SS I O N + M U LT I P L E X I N G + S E R V E R P US H
  132. ST R E A M S CC-BY: Kylir Horton

  133. ST R E A M S • Each request/response is

    a stream • Streams are comprised of Frames • Streams may have a weight (1-256) • Streams may have a dependency
  134. W E I G H TS CC-BY 2.0: Tri Vu

    Dao
  135. ST R E A M W E I G H

    TS Stream A Weight: 1 Stream B Weight: 2 Stream C Weight: 3 2X Stream A 1.5X Stream B
 3X Stream A
  136. D E P E N D E N C I

    E S CC-BY-SA 2.0: David Gamez
  137. ST R E A M D E P E N

    D E N C I E S Stream A Stream B Depends: A Stream C Depends: B Delivered after A Delivered after B
  138. F R A M E S CC-BY: Bart Everson

  139. F R A M E S • Messages are composed

    of multiple frames, e.g. headers, data, and settings • Each frame has a common header • 9 byte, length prefixed • Easy & efficient to parse • Frames can be interleaved — this is multiplexing
  140. F R A M E S POST /search HTTP/1.1 Host:

    example.org Content-Type: application/json Content-Length: 58 {
 "keywords":"example",
 "location":"posts"
 } HEADERS
 frame Data
 frame } }
  141. H E A D E RS : H PAC K

    CC-BY-SA: intelligente_persona
  142. H E A D E RS : H PA C

    K • Uses a table of known values as an index • Can represent a header name and value (e.g. :status: 404), or just a header name (e.g. accept:) • Values are either statically encoded, or use a static Huffman code
  143. # Name Value 1 :authority 2 :method GET 3 :method

    POST 4 :path / 5 :path /index.html 6 :scheme http 7 :scheme https 8 :status 200 9 :status 204 10 :status 206 11 :status 304 12 :status 400 13 :status 404 14 :status 500 15 accept-charset
  144. N E W A R C H I T E

    CT U R E & T E C H N I Q U E S
  145. D E L I V E R I N G

    A PAG E
  146. PAG E A SS E TS Ɇ ɂ Ȑ

  147. PAG E A SS E TS Ɇ ɂ Ȑ

  148. PAG E A SS E TS GET /index.html Ɇ ɂ

    Ȑ
  149. PAG E A SS E TS GET /index.html 200 OK

    text/html Ɇ ɂ Ȑ
  150. PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html
  151. PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg
  152. PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot
  153. PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot main.js
  154. PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot main.js splash.jpg
  155. PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot styles.css main.js splash.jpg
  156. A P I S

  157. A P I R E Q U E ST Ɇ

    ɂ Ȑ
  158. A P I R E Q U E ST Ɇ

    ɂ Ȑ
  159. A P I R E Q U E ST GET

    /post/1 Ɇ ɂ Ȑ
  160. A P I R E Q U E ST GET

    /post/1 200 OK application/json Ɇ ɂ Ȑ
  161. S U B - R E S O U R

    C E P US H W I T H D E P E N D E N C I E S Ɇ Ȑ ɂ GET /post/1 200 OK application/json
  162. S U B - R E S O U R

    C E P US H W I T H D E P E N D E N C I E S Ɇ Ȑ ɂ GET /post/1 200 OK application/json /post/1/comments /author/1
  163. S U B - R E S O U R

    C E P US H W I T H D E P E N D E N C I E S Ɇ Ȑ ɂ GET /post/1 200 OK application/json /post/1/comments /author/1 /comment/1 /comment/…
  164. S U B - R E S O U R

    C E P US H W I T H D E P E N D E N C I E S Ɇ Ȑ ɂ GET /post/1 200 OK application/json /post/1/comments /author/1 /comment/1 /images/author/1 /comment/…
  165. S U B - R E S O U R

    C E P US H W I T H D E P E N D E N C I E S Ɇ Ȑ ɂ GET /post/1 200 OK application/json /post/1/comments /author/1 /comment/1 /author/2 /images/author/1 /comment/…
  166. S U B - R E S O U R

    C E P US H W I T H D E P E N D E N C I E S Ɇ Ȑ ɂ GET /post/1 200 OK application/json /post/1/comments /author/1 /comment/1 /author/2 /images/author/1 /comment/… /author/…
  167. I N S U M M A R Y

  168. N O M O R E H AC K S

    !
  169. H U G E P E R FO R M

    A N C E W I N S
  170. 6 0 % + M A R K E T

    S H A R E
  171. H T T P / 2 I S A W

    E S O M E ! CC-BY-SA: Steven Gerner
  172. F E E D B AC K & Q U

    E ST I O N S Feedback: Twitter: Email: Slides: https://joind.in/ @dshafik dshafik@akamai.com http://daveyshafik.com/slides 18813