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

HTTP/2 Deep Dive: Priority & Server Push

Moto Ishizawa
May 21, 2015
Technology
17
3.4k

HTTP/2 Deep Dive: Priority & Server Push

Moto Ishizawa

May 21, 2015
Tweet

More Decks by Moto Ishizawa

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

Other Decks in Technology

See All in Technology
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン　〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
【技術書典17】OpenFOAM（自宅で極める流体解析）2次元円柱まわりの流れ
kamakiri1225
0
210
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
初心者に Vue.js を 教えるには
tsukuha
5
390
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
Gradle: The Build System That Loves To Hate You
aurimas
2
150
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
APIテスト自動化の勘所
yokawasa
7
4.1k
Autify Company Deck
autifyhq
1
39k

Featured

See All Featured
Happy Clients
brianwarren
97
6.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Practical Orchestrator
shlominoach
186
10k
The Invisible Side of Design
smashingmag
297
50k
A better future with KSS
kneath
238
17k
Thoughts on Productivity
jonyablonski
67
4.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
4 Signs Your Business is Dying
shpigford
180
21k

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