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

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
930
カンムにおけるプロダクトセキュリティのこれまでとこれから
summerwind
1
2.3k
Sharing test cases of internet protocols with Go and OCI Artifacts
summerwind
0
790
Using Thanos as a long-term storage for your Prometheus metrics
summerwind
1
11k
Using Kubernetes as a datastore for SPIRE
summerwind
1
940
Whitebox Controller
summerwind
5
1.7k
Managing Kubernetes manifests with Spruce
summerwind
2
3.9k
Understanding HTTP/2 prioritization
summerwind
16
5.8k
HTTP/2 Server Push Considered Harmful
summerwind
1
2k

Other Decks in Technology

See All in Technology
Janus
bkuhlmann
0
490
0→1開発における技術選定において一番大切なこと
bicstone
1
320
オーナーシップを持つ領域を明確にする
konifar
10
1.9k
「共通基盤」を超えよ！ 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.8k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
2
100
【SORACOM UG】(2024年度版) SIMってなんだ？ ～セルラー通信がつながる仕組み、解説します～
soracom
PRO
0
220
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
1
290
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
200
[2024年3月版] Databricksのシステムアーキテクチャ
databricksjapan
7
1.9k
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
TransitGatewayの基礎
toru_kubota
0
230
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.9k

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Six Lessons from altMBA
skipperchong
19
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Facilitating Awesome Meetings
lara
40
5.6k
Infographics Made Easy
chrislema
237
18k
We Have a Design System, Now What?
morganepeng
42
6.7k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
The Cost Of JavaScript in 2023
addyosmani
13
3.8k
Web Components: a chance to create the future
zenorocha
304
41k
Automating Front-end Workflow
addyosmani
1354
200k

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