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

HTTP/2 Deep Dive: Priority & Server Push

Avatar for Moto Ishizawa Moto Ishizawa
May 21, 2015
Technology
17
3.5k

HTTP/2 Deep Dive: Priority & Server Push

Avatar for Moto Ishizawa

Moto Ishizawa

May 21, 2015
Tweet

More Decks by Moto Ishizawa

See All by Moto Ishizawa
LLM エージェントを使った実験
Avatar for Moto Ishizawa summerwind
0
1.2k
カンムにおけるプロダクトセキュリティのこれまでとこれから
Avatar for Moto Ishizawa summerwind
1
2.8k
Sharing test cases of internet protocols with Go and OCI Artifacts
Avatar for Moto Ishizawa summerwind
0
1.1k
Using Thanos as a long-term storage for your Prometheus metrics
Avatar for Moto Ishizawa summerwind
1
12k
Using Kubernetes as a datastore for SPIRE
Avatar for Moto Ishizawa summerwind
1
1.1k
Whitebox Controller
Avatar for Moto Ishizawa summerwind
5
1.8k
Managing Kubernetes manifests with Spruce
Avatar for Moto Ishizawa summerwind
2
4.3k
Understanding HTTP/2 prioritization
Avatar for Moto Ishizawa summerwind
16
6.3k
HTTP/2 Server Push Considered Harmful
Avatar for Moto Ishizawa summerwind
1
2.1k

Other Decks in Technology

See All in Technology
2025-06-26_Lightning_Talk_for_Lightning_Talks
Avatar for hashimo2 _hashimo2
2
100
エンジニア向け技術スタック情報
Avatar for 株式会社カウシェ kauche
1
290
なぜ私はいま、ここにいるのか？ #もがく中堅デザイナー #プロダクトデザイナー
Avatar for 弁護士ドットコム bengo4com
0
480
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
Avatar for HASEGAWA Tomoki tomzoh
4
3.3k
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
Avatar for kubell kubell_hr
1
200
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
Avatar for k.muguruma mtpooh
2
410
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
Avatar for hiro-torii hiro_torii
0
130
A2Aのクライアントを自作する
Avatar for Ryunosuke Iwai rynsuke
1
210
Model Mondays S2E03: SLMs & Reasoning
Avatar for Nitya Narasimhan, PhD nitya
0
110
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
Avatar for kazzpapa3 kazzpapa3
2
570
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
Avatar for 転職ドラフト tenshoku_draft
0
120
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
0
390

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
277
23k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
800

Transcript

  1. HTTP/2 Deep Dive: Priority & Server Push Moto Ishizawa @summerwind

  2. Moto Ishizawa @summerwind

  3. ͜ͷࢿྉͷτϐοΫ • HTTP/2 ͷ Priority ʹ͍ͭͯ • Priority ͷ࢓૊Έ •

    ࣮૷ʹ͓͚Δ Priority ͷαϙʔτঢ়گ • Priority ͕༗ޮͳ৔߹ͷετϦʔϜͷ࣮ࡍͷಈ͖ • HTTP/2 ͷ Server Push ʹ͍ͭͯ • Server Push ͷ࢓૊Έ • ࣮૷ʹ͓͚Δ Server Push ͷαϙʔτঢ়گ • Preload Λ༻͍ͨ Server Push • Server Push ͱ Priority ͷؔ܎

  4. Priority

  5. HTTP/2 Priority • ϦΫΤετͷ༏ઌ౓ΛࢦఆͰ͖Δ࢓૊Έ • ΫϥΠΞϯτ͕αʔόʔʹରͯ͠ࢦఆ͢Δ • αʔόʔ͸ඞͣ͠΋ै͏ඞཁ͸ͳ͍ (͋͘·Ͱώϯτ) •

    ॏΈ෇͚͚ͩͰͳ͘ɺετϦʔϜͷґଘؔ܎΋ࢦఆͰ͖Δ • HEADERS ϑϨʔϜͰ৽͍͠ετϦʔϜͷ༏ઌ౓ΛࢦఆՄೳ • PRIORITY ϑϨʔϜͰطଘͷετϦʔϜͷ༏ઌ౓ΛมߋՄೳ Client Server HEADERS #1 (Priority 16) HEADERS #1 HEADERS #3 HEADERS #3 (Priority 256) DATA #3 DATA #3 DATA #1 DATA #3

  6. HTTP/2 Priority Tree 0 3 128 5 64 7 16

    9 16 ετϦʔϜID ॏΈ ґଘؔ܎

  7. HTTP/2 Priority Tree 0 3 128 5 64 7 16

    9 16 σϑΥϧτͷॏΈ͸ 16 σϑΥϧτͰ͸ετϦʔϜID 0 ʹґଘ͢Δ

  8. HTTP/2 Priority Tree 0 3 128 5 64 7 16

    9 16 Ϧιʔε͸ɺ༏ઌ౓͸ॏΈͷ૬ରతͳൺ཰Ͱܾఆ͞ΕΔɻ ετϦʔϜID 3 ͸શϦιʔεͷ 2/3 ׂ͕Γ౰ͯΒΕΔɻ

  9. HTTP/2 Priority Tree 0 3 128 5 64 7 16

    9 16 ଞͷετϦʔϜʹґଘ͢ΔετϦʔϜͷϦιʔε͸ɺґଘઌετϦʔϜͷϦιʔεʹج͍ͮͯܭࢉ͞ΕΔɻ ετϦʔϜID 7 ͸ɺετϦʔϜID 3 ͷϦιʔεͷ 1/2 (Ϧιʔεશମͷ 1/3) ׂ͕Γ౰ͯΒΕΔɻ

  10. ࣮૷ʹ͓͚Δ Priority ͷαϙʔτঢ়گ αʔόʔ ࣮૷ όʔδϣϯ αϙʔτ nghttp2 1.0.0 ͋Γ

    H2O 1.2.0 ͋Γ Apache Traffic Server 5.3.0 ͳ͠ ϒϥ΢β ࣮૷ όʔδϣϯ αϙʔτ Firefox 38.0.1 ͋Γ Chrome 43.0.2357.65 ͋Γ (ॏΈ෇͚ͷΈ) Edge 0.11.10074.0 ͳ͠

  11. Priority ͷݕূ • ݕূ༻ͷϖʔδΛ֤ϒϥ΢βͰಡΈࠐΉ • αʔόʔ͸ nghttpx 1.0.0 Λ࢖༻ •

    ݕূ༻ϖʔδͷ࢓༷ • head ཁૉ಺ʹ഑ஔͨ͠ CSS × 3 • head ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3 • body ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3 • body ཁૉ಺ʹ഑ஔͨ͠ը૾ × 3 • ϦιʔεͷαΠζ͸શͯ 100 KB <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <link href="tests/1.css" rel="stylesheet"> <link href="tests/2.css" rel="stylesheet"> <link href="tests/3.css" rel="stylesheet"> <script src="tests/1.js"></script> <script src="tests/2.js"></script> <script src="tests/3.js"></script> </head> <body> <h1>Test</h1> <img src=“tests/1.jpg” alt="1"> <img src=“tests/2.jpg“ alt="2"> <img src=“tests/3.jpg” alt="3"> <script src="tests/4.js"></script> <script src="tests/5.js"></script> <script src="tests/6.js"></script> </body> </html>

  12. Firefox ͕ੜ੒͢Δ Priority Tree 9 1. ϦΫΤετલ 0 3 7

    201 1 1 11 1 5 101 ༏ઌ౓πϦʔ͕ॳظԽ͞ΕΔɻ
 ༏ઌ౓͸શͯ PRIORITY ϑϨʔϜͰࢦఆ͞ΕΔɻ

  13. Firefox ͕ੜ੒͢Δ Priority Tree 9 2. HTML ΁ͷϦΫΤετ 0 3

    7 201 1 1 13 32 11 1 5 101 HTML ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  14. Firefox ͕ੜ੒͢Δ Priority Tree 9 3. CSS ΁ͷϦΫΤετ 0 3

    7 201 1 1 13 32 19 32 17 32 15 32 11 1 5 101 CSS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  15. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 4. head ཁૉ಺ͷ JS

    ΁ͷϦΫΤετ 0 3 7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 5 101 head ཁૉ಺ͷ JS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  16. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 5. ը૾΁ͷϦΫΤετ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 5 101 ը૾΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  17. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 6. body ཁૉ಺ͷ JS

    ΁ͷϦΫΤετ 0 3 7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101 body ཁૉ಺ͷ JS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  18. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  19. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  20. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  21. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  22. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  23. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  24. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  25. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  26. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  27. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  28. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  29. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  30. Firefox ͕ੜ੒͢Δ Priority Tree 9 25 7. Ϩεϙϯεͷड৴ 0 3

    7 201 1 1 32 13 32 19 32 21 32 23 32 17 32 15 32 11 1 27 22 29 22 31 22 35 32 37 32 33 32 5 101

  31. Firefox ͕ੜ੒͢Δ Priority Tree ͷߟ࡯ • ࠷ॳʹ PRIORITY ϑϨʔϜͰ໦ͷେ࿮͕ߏ੒͞ΕΔ •

    CSS ΍ JSɺը૾ͷछྨ͝ͱʹॏΈ෇͚Λ͏·͘΍͍ͬͯΔ • సૹͷॱং • ͓͓ΑͦɺCSSɺhead ཁૉ಺ JSɺbody ཁૉ಺ JSɺը૾ ͷॱʹͳ͍ͬͯΔ • Firefox ͕ҙਤͨ͠௨Γʹసૹ͞Ε͍ͯΔͱࢥΘΕΔ

  32. Chrome ͕ੜ੒͢Δ Priority Tree 1. HTML ΁ͷϦΫΤετ 0 1 256

    HTML ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  33. 5 Chrome ͕ੜ੒͢Δ Priority Tree 2. CSS ΁ͷϦΫΤετ 0 1

    256 3 220 220 7 220 CSS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  34. 5 Chrome ͕ੜ੒͢Δ Priority Tree 3. head ཁૉ಺ͷ JS ΁ͷϦΫΤετ

    0 1 256 3 220 220 7 220 9 183 11 183 13 183 head ཁૉ಺ͷ JS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  35. 5 Chrome ͕ੜ੒͢Δ Priority Tree 4. body ཁૉ಺ͷ JS ΁ͷϦΫΤετ

    0 1 256 15 183 17 183 19 183 3 220 220 7 220 9 183 11 183 13 183 body ཁૉ಺ͷ JS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ

  36. 5 Chrome ͕ੜ੒͢Δ Priority Tree 5. ը૾΁ͷϦΫΤετ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 ը૾΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ 15 183 17 183 19 183

  37. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  38. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  39. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  40. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  41. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  42. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  43. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  44. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  45. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  46. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  47. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  48. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  49. 5 Chrome ͕ੜ੒͢Δ Priority Tree 6. Ϩεϙϯεͷड৴ 0 1 256

    3 220 220 7 220 9 183 11 183 13 183 21 110 23 110 25 110 15 183 17 183 19 183

  50. Chrome ͕ੜ੒͢Δ Priority Tree ͷߟ࡯ • શͯͷετϦʔϜ͕ ID 0 ʹґଘ͢Δߏ੒

    • Firefox ͱൺֱ͢Δͱγϯϓϧͳ༏ઌ౓ͷׂΓ౰ͯ • ׂΓ౰ͯΒΕΔϦιʔεͷׂ߹ͷ͕ࠩগͳ͍ • CSS : JS : ը૾ = 10 : 8 : 5 • େ͖ͳը૾Ϧιʔε͕૿͑ΔͱɺCSS ΍ JS ͷసૹ્͕֐͞ΕΔՄೳੑ͕͋Γͦ͏ • ը૾ͷॏΈΛ΋ͬͱখͯ͘͞͠΋Α͍ͷ͔΋͠Εͳ͍

  51. Edge ͕ੜ੒͢Δ Priority Tree 1. HTML ΁ͷϦΫΤετ 0 1 16

  52. 5 Edge ͕ੜ੒͢Δ Priority Tree 2. ֤ϦιʔεͷϦΫΤετ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16 CSSɺhead ཁૉ಺ͷ JSɺը૾ɺbody ཁૉ಺ͷ JS ΁ͷϦΫΤετͷετϦʔϜɻ ༏ઌ౓͸શͯະࢦఆͷͨΊɺσϑΥϧτͷॏΈͰ͋Δ 16 ׂ͕Γ౰ͯΒΕΔɻ

  53. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  54. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  55. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  56. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  57. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  58. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  59. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  60. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  61. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  62. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  63. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  64. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  65. 5 Edge ͕ੜ੒͢Δ Priority Tree 3. Ϩεϙϯεͷड৴ 0 1 16

    15 16 17 16 19 16 3 16 16 7 16 9 16 11 16 13 16 21 16 23 16 25 16

  66. Edge ͕ੜ੒͢Δ Priority Tree ͷߟ࡯ • Firefox ΍ Chrome ͱ͸ҟͳΓ༏ઌ౓͸ະࢦఆ

    • શͯͷετϦʔϜʹσϑΥϧτͷॏΈ 16 ׂ͕Γ౰ͯΒΕΔ • ༏ઌ౓͕ະࢦఆͷͨΊɺαΠζͷখ͞ͳϦιʔε͔Βసૹ͕׬ྃ͢Δ • େ͖ͳը૾Ϧιʔε͕૿͑ΔͱɺCSS ΍ JS ͷసૹ͕େ્͖͘֐͞ΕΔՄೳੑ͕͋Γͦ͏ • ਖ਼ࣜ൛Ͱͷ༏ઌ౓ͷ࣮૷ʹظ଴

  67. Server Push

  68. HTTP/2 Server Push • ͋ΔϦιʔεʹඥͮ͘ϦιʔεΛϦΫΤετͳ͠ʹૹΔ • ໊લͷ௨Γαʔόʔଆ͕ϓογϡ͢Δ࢓૊Έ • ࠷ॳʹ PUSH_PROMISE

    ϑϨʔϜͰ௨஌͕͘Δ • ΫϥΠΞϯτ͸ RST_STREAM ϑϨʔϜͰڋ൱Ͱ͖Δ Client Server HEADERS #1 PUSH_PROMISE #1 (Promised Stream #3) HEADERS #3 HEADERS #1 DATA #3 DATA #1 DATA #3 DATA #1

  69. ࣮૷ʹ͓͚Δ Server Push ͷαϙʔτঢ়گ αʔόʔ ࣮૷ όʔδϣϯ αϙʔτ nghttp2 1.0.0

    ͋Γ (Preload) H2O 1.2.0 ͋Γ (Preload) Apache Traffic Server 5.3.0 ͳ͠ ϒϥ΢β ࣮૷ όʔδϣϯ αϙʔτ Firefox 38.0.1 ͋Γ Chrome 43.0.2357.65 ͋Γ Edge 0.11.10074.0 ͋Γ

  70. Preload ʹΑΔ Server Push Link: </css/style.css>; rel=preload Link: </js/track.js>; rel=preload

    nghttp2 ΍ H2O ͸ Preload ࢓༷ʹج͍ͮͨ Server Push Λαϙʔτ͍ͯ͠Δɻ ͜ΕΒͷαʔόʔΛ Reverse Proxy ͱͯ͠࢖༻͍ͯ͠Δ৔߹ɺΦϦδϯαʔόʔͷϨεϙϯεʹ ҎԼͷΑ͏ͳ Link ϔομʔΛ෇༩͓ͯ͘͜͠ͱͰɺϔομʔʹࢦఆͨ͠ϦιʔεΛ Proxy ͕ࣗಈ औಘ্ͨ͠ͰɺServer Push ͱͯ͠ɺͦͷϦιʔεΛΫϥΠΞϯτʹૹ৴͢Δɻ ※ nghttp2 ʹ෇ଐͷ nghttpx ͸ɺΦϦδϯαʔόʔ͕ฦ͢Ϩεϙϯεͷεςʔλε͕ 200 Ͱͳ͍ͱ Server Push ͕ൃಈ͠ͳ͍ ɹͳͲɺ͍͔ͭ͘৚͕݅͋ΔͷͰ஫ҙ͕ඞཁɻ

  71. Server Push Λ૊Έ߹Θͤͨ Priority ͷݕূ • ࣮ࢪํ๏͸ Priority ͷݕূ࣌ͱಉ͡ •

    αʔόʔϓογϡ͸ Preload ํࣜΛ࢖༻ • ݕূ༻ϖʔδͷ࢓༷ΛҰ෦มߋ • head ཁૉ಺ʹ഑ஔͨ͠ CSS × 3 • head ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3 • body ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3 • body ཁૉ಺ʹ഑ஔͨ͠ը૾ × 3 • ֤Ϧιʔεͷ࠷ॳͷ1ݸ໨͸ϓογϡ͢Δ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <link href="tests/1.css" rel="stylesheet"> <link href="tests/2.css" rel="stylesheet"> <link href="tests/3.css" rel="stylesheet"> <script src="tests/1.js"></script> <script src="tests/2.js"></script> <script src="tests/3.js"></script> </head> <body> <h1>Test</h1> <img src=“tests/1.jpg” alt="1"> <img src=“tests/2.jpg” alt="2"> <img src=“tests/3.jpg” alt="3"> <script src="tests/4.js"></script> <script src="tests/5.js"></script> <script src="tests/6.js"></script> </body> </html>

  72. 0 Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 1.

    HTML ΁ͷϦΫΤετ 3 7 201 1 1 13 32 11 1 5 101

  73. 0 Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 2.

    ϓογϡετϦʔϜͷ։࢝ 3 7 201 1 1 13 32 11 1 5 101 2 16 4 16 6 16 8 16 ϓογϡετϦʔϜͷετϦʔϜ ID ͸ۮ਺ʹͳΔɻ PUSH_PROMISE ϑϨʔϜ͕ૹ৴͞ΕͨετϦʔϜʹґଘ͢Δɻ

  74. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 3. ϓογϡετϦʔϜͷ༏ઌ౓มߋ

    3 7 201 1 1 13 32 11 1 5 101 2 2 4 2 6 2 8 2 0 PRIORITY ϑϨʔϜʹΑΓґଘઌͱॏΈ͕มߋʹɻ ετϦʔϜͷσʔλ͸·ͩసૹதɻ

  75. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 4. ϓογϡετϦʔϜͷड৴

    3 7 201 1 1 13 32 11 1 5 101 2 2 4 2 6 2 8 2 0

  76. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 4. ϓογϡετϦʔϜͷड৴

    3 7 201 1 1 13 32 11 1 5 101 2 2 4 2 6 2 8 2 0

  77. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 4. ϓογϡετϦʔϜͷड৴

    3 7 201 1 1 13 32 11 1 5 101 2 2 4 2 6 2 8 2 0

  78. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 4. ϓογϡετϦʔϜͷड৴

    3 7 201 1 1 13 32 11 1 5 101 2 2 4 2 6 2 8 2 0

  79. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 4. ϓογϡετϦʔϜͷड৴

    3 7 201 1 1 13 32 11 1 5 101 2 2 4 2 6 2 8 2 0

  80. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 5. ֤Ϧιʔε΁ͷϦΫΤετ

    3 7 201 1 1 13 32 19 32 21 32 17 32 15 32 11 1 23 22 25 22 29 32 27 32 5 101 2 2 4 2 6 2 8 2 0

  81. Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 9 6. Ϩεϙϯεͷड৴

    3 7 201 1 1 13 32 19 32 21 32 17 32 15 32 11 1 23 22 25 22 29 32 27 32 5 101 2 2 4 2 6 2 8 2 0

  82. Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 1. HTML ΁ͷϦΫΤετ

    0 1 256

  83. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 2. ϓογϡετϦʔϜͷ։࢝

    0 1 256 2 16 16 6 16 8 16 ϓογϡετϦʔϜͷετϦʔϜ ID ͸ۮ਺ʹͳΔɻ PUSH_PROMISE ϑϨʔϜ͕ૹ৴͞ΕͨετϦʔϜʹґଘ͢Δɻ

  84. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴

    0 1 256 2 16 16 6 16 8 16

  85. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴

    0 1 256 2 16 16 6 16 8 16

  86. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴

    0 1 256 2 16 16 6 16 8 16

  87. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴

    0 1 256 2 16 16 6 16 8 16

  88. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴

    0 1 256 2 16 16 6 16 8 16

  89. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 5. ֤Ϧιʔε΁ͷϦΫΤετ

    0 1 256 7 183 9 183 13 110 2 16 16 6 16 8 16 3 220 5 220 15 110 11 183 17 183

  90. 4 Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ) 6. Ϩεϙϯεͷड৴

    0 1 256 7 183 9 183 13 110 2 16 16 6 16 8 16 3 220 5 220 15 110 11 183 17 183

  91. Server Push ͷߟ࡯ • Firefox ͸ϓογϡετϦʔϜͷ༏ઌ౓Λௐ੔͢Δ • CSS ͷసૹʹӨڹ͕ͳ͍Α͏ʹɺґଘઌͱॏΈͷ྆ํΛมߋ •

    ༏ઌ౓͸ϒϥ΢β΍ϓογϡ͢ΔϦιʔεͷ਺ͳͲʹΑͬͯมԽ͢Δ • ࠓճ͸ݻఆαΠζͷΈͷݕূͩͬͨͷͰɺେ͖͍ը૾ͷϓογϡͳͲͷݕূ΋ඞཁ • ͓ͦΒ͘ϕετϓϥΫςΟε͸ଘࡏ͠ͳ͍ͷͰɺຖճ͖ͪΜͱͨ͠ݕূ͕ඞཁ͔΋ • ͱΓ͋͑ͣ Server Push Λ࢖͍͍ͨʁ • ༏ઌ౓ͷ௿͍Ϧιʔε͚ͩΛগͳ͍਺Ͱϓογϡ͢Ε͹େ͖ͳ໰୊ʹ͸ͳΒͳͦ͞͏ • ྫ͑͹ΠϯϥΠϯʹ͍ͯͨ͠ը૾ͱ͔

  92. ͓ͬ͠ΌΔ௨ΓͰͨ͠…

  93. ·ͱΊ • HTTP/2 ͷύϑΥʔϚϯεΛཧղ͢Δʹ͸ɺPriority ʹର͢Δཧղ͕ॏཁ • Priority ͷѻ͍͸ɺαʔόʔ΍ΫϥΠΞϯτ͝ͱʹҟͳΔ • ґଘؔ܎΍ॏΈ͚ͩͰͳ͘ɺϑΝΠϧαΠζ΍ϦΫΤετॱংͷߟྀ΋ඞཁ

    • ࣮ࡍʹαʔόʔͱΫϥΠΞϯτΛ૊Έ߹Θͤͯܭଌͯ͠ͳ͍ͱ෼͔Βͳ͍ࣄ΋ଟ͍ • Server Push Λ࢖͏৔߹΋ɺPriority Λߟྀ͢Δඞཁ͕͋Δ • ϓογϡͷ΍ΓํʹΑͬͯ͸ɺϨϯμϦϯά͕஗͘ͳΔέʔε΋͋Γ͑ͦ͏ • Priority ΋ؚΊ͖ͯͪΜͱܭଌ͠ɺධՁ͢Δඞཁ͕͋Δ

  94. Thank you :-)