[Codemotion Berlin 2016] HTTP/2 and Asynchronous APIs

[Codemotion Berlin 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.

Fee39f0c0ffb29d9ac21607ed188be6b?s=128

Davey Shafik

October 24, 2016
Tweet

Transcript

  1. 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. 2.

    D AV E Y S H A F I K

    • Developer • Author • Open Source Contributor • Release Manager for PHP 7.1 • @dshafik
  3. 3.

    h tt p : / /d e v e l

    o p e r. a ka m a i .co m
  4. 6.
  5. 7.

    W H AT I S H T T P/ 2

    ? CC-BY: Marco Bellucci
  6. 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
  7. 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
  8. 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
  9. 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
  10. 16.
  11. 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
  12. 18.

    B I N A R Y I N ST E

    A D O F T E XT CC-BY: brett jordan
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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 ?
  19. 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
  20. 26.
  21. 27.

    H T T P/ 1 . X S U C

    K S CC-BY: Flóra Soós
  22. 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
  23. 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
  24. 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
  25. 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
  26. 35.
  27. 36.
  28. 37.

    S E R I A L U P LO A

    D S Ȑ  
  29. 38.

    S E R I A L U P LO A

    D S Ȑ   
  30. 44.
  31. 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
  32. 46.

    Ȑ

  33. 47.

    Ȑ

  34. 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" }
  35. 51.

    Ȑ

  36. 52.

    Ȑ

  37. 56.

    Ȑ

  38. 57.

    Ȑ

  39. 67.

    M U LT I P L E X E D

    Ȑ GET /post/example/comments/3
  40. 68.

    M U LT I P L E X E D

    Ȑ GET /post/example/comments/3 GET /post/example/comments/1
  41. 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
  42. 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
  43. 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
  44. 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
  45. 73.
  46. 75.
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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
  52. 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
  53. 82.

    4 7 . 6 7 
 s e co n

    d s CC-BY: Hernán Piñera
  54. 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
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 89.

    6 2 . 1 9 
 s e co n

    d s CC-BY-NC: Scott Beckner
  61. 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
  62. 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
  63. 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
  64. 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
  65. 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); } }
  66. 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();
  67. 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;
  68. 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
 );
  69. 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
 );
  70. 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); } }
  71. 101.

    2 . 1 4 
 s e co n d

    s CC-BY: motoracereports
  72. 102.

    H T T P/ 2 N E G OT I

    AT I O N CC-BY-ND: dhendrix73
  73. 103.

    B A C KW A R D S CO M

    PAT I B I L I TY
  74. 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
  75. 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
  76. 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 ...
  77. 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
  78. 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
  79. 109.

    D I R E CT CO N N E CT

    W I T H H T T P/ 2
  80. 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
  81. 111.
  82. 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
  83. 113.

    ST I L L M A K I N G

    S U B - R E Q U E STS
  84. 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" } } ] }
  85. 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",
  86. 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",
  87. 117.

    "gravatar": "fee39f0c0ffb29d9ac21607ed188be6b" }, "comments": [ { "type": "comment", "id": "1",

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

    } }, { "type": "comment", "id": "3", "content": "third", "author":

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

    } }, { "type": "comment", "id": "3", "content": "third", "author":

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

    } }, { "type": "comment", "id": "4", "content": "fourth", "author":

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

    Ȑ

  92. 122.

    Ȑ

  93. 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
  94. 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
  95. 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
  96. 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
  97. 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
  98. 136.

    D E P E N D E N C I

    E S CC-BY-SA 2.0: David Gamez
  99. 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
  100. 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
  101. 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 } }
  102. 141.

    H E A D E RS : H PAC K

    CC-BY-SA: intelligente_persona
  103. 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
  104. 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
  105. 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
  106. 145.
  107. 149.
  108. 150.

    PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html
  109. 151.

    PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg
  110. 152.

    PAG E A SS E TS Ɇ Ȑ ɂ GET

    /index.html 200 OK text/html critical-path.css critical-path.js logo.svg font.eot
  111. 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
  112. 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
  113. 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
  114. 156.
  115. 159.

    A P I R E Q U E ST GET

    /post/1 Ɇ ɂ Ȑ
  116. 160.

    A P I R E Q U E ST GET

    /post/1 200 OK application/json Ɇ ɂ Ȑ
  117. 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
  118. 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
  119. 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/…
  120. 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/…
  121. 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/…
  122. 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/…
  123. 169.

    H U G E P E R FO R M

    A N C E W I N S
  124. 170.
  125. 171.

    H T T P / 2 I S A W

    E S O M E ! CC-BY-SA: Steven Gerner
  126. 172.

    F E E D B A C K & Q

    U E S T I O N S Twitter: Email: Slides: @dshafik dshafik@akamai.com http://daveyshafik.com/slides