Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTTP/2 Deep Dive: Priority & Server Push

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

HTTP/2 Deep Dive: Priority & Server Push

Avatar for Moto Ishizawa

Moto Ishizawa

May 21, 2015

More Decks by Moto Ishizawa

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

Other Decks in Technology

See All in Technology
Webとヘルスデータ
Avatar for Yuku Kotani yukukotani
1
360
AI時代だからこそ、スケールしないことをやろう
Avatar for 重村優太 yutashigemura
1
130
Claude Code本って、 読む必要あるの？
Avatar for Oikon oikon48
2
380
2026-09-11 【Snowflake World Tour Tokyo 2026】Snowflakeを起点に、AI Agentが自律稼働し続ける未来へ / Driving AI Agents with Snowflake
Avatar for civitaspo civitaspo
0
290
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
190
作品が生態系になった ─ Mini Tokyo 3D から世界へ
Avatar for 草薙昭彦 nagix
0
150
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
130
2026-09-10 【Snowflake World Tour Tokyo 2026】dbt Core と Snowflake で実現する多層的なデータガバナンス / Multi-Layered Data Governance Powered by dbt Core and Snowflake
Avatar for civitaspo civitaspo
0
310
アリアドネの糸と、20年ごとの建て替え ── 長尾真『電子図書館』を、伊勢で読み直す / Rereading Makoto Nagao’s "Electronic Library" in Ise
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
150
Slack上でインフラをトラブルシュートする！ Agentic Platform Engineeringの第一歩
Avatar for teru0x1 teru0x1
0
150
全員がプロダクトへ向き合う組織を持続成長させるために——組織づくりのフライホイールと4象限 / The Flywheel Model and Four Quadrants for Organizational Design
Avatar for hiro-torii hiro_torii
4
960
module Synths; end
Avatar for あそなす asonas
1
130

Featured

See All Featured
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
390
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
9
36k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
540
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.3k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
820
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
340
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.1k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k

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 :-)