Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
HTTP/2 Deep Dive: Priority & Server Push
Moto Ishizawa
May 21, 2015
Technology
17
3k
HTTP/2 Deep Dive: Priority & Server Push
Moto Ishizawa
May 21, 2015
Tweet
Share
More Decks by Moto Ishizawa
See All by Moto Ishizawa
Sharing test cases of internet protocols with Go and OCI Artifacts
summerwind
0
240
Using Thanos as a long-term storage for your Prometheus metrics
summerwind
1
7.8k
Using Kubernetes as a datastore for SPIRE
summerwind
1
650
Whitebox Controller
summerwind
5
1.5k
Managing Kubernetes manifests with Spruce
summerwind
2
3.5k
Understanding HTTP/2 prioritization
summerwind
17
5.2k
HTTP/2 Server Push Considered Harmful
summerwind
1
1.8k
Implementing HTTP/2 client in 60 minutes
summerwind
3
2.2k
HTTP/2 を読み解く技術
summerwind
5
3.3k
Other Decks in Technology
See All in Technology
JDK Flight Recorder入門
chiroito
1
480
データエンジニアリングの潮流を俯瞰する
tetsuroito
1
710
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
kawamataryo
2
110
スクラムのスケールとチームトポロジー / Scaled Scrum and Team Topologies
daiksy
1
380
ハッカー飯に New Relic を導入して実践した3つのこと
nobuakikikuchi
0
160
マネージャーからみたスクラムと自己管理化
shibe23
0
940
Target SDK Versionを上げない Notification runtime permission対応
napplecomputer
0
110
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
kyonmm
PRO
2
400
miisan's career talk
mii3king
0
210
PUTとPOSTどっち使う?
hankehly
0
150
Modern Android dependency injection
hugovisser
1
110
会社訪問アプリ「Wantedly Visit」における推薦システム開発事例
hakubishin3
2
490
Featured
See All Featured
Building Applications with DynamoDB
mza
83
4.7k
How GitHub (no longer) Works
holman
296
140k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
The Pragmatic Product Professional
lauravandoore
19
2.9k
Making Projects Easy
brettharned
98
4.3k
What the flash - Photography Introduction
edds
61
10k
Ruby is Unlike a Banana
tanoku
91
9.2k
The Invisible Side of Design
smashingmag
290
48k
Optimizing for Happiness
mojombo
365
63k
The Mythical Team-Month
searls
209
39k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
Transcript
HTTP/2 Deep Dive: Priority & Server Push Moto Ishizawa @summerwind
Moto Ishizawa @summerwind
͜ͷࢿྉͷτϐοΫ • HTTP/2 ͷ Priority ʹ͍ͭͯ • Priority ͷΈ •
࣮ʹ͓͚Δ Priority ͷαϙʔτঢ়گ • Priority ͕༗ޮͳ߹ͷετϦʔϜͷ࣮ࡍͷಈ͖ • HTTP/2 ͷ Server Push ʹ͍ͭͯ • Server Push ͷΈ • ࣮ʹ͓͚Δ Server Push ͷαϙʔτঢ়گ • Preload Λ༻͍ͨ Server Push • Server Push ͱ Priority ͷؔ
Priority
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
HTTP/2 Priority Tree 0 3 128 5 64 7 16
9 16 ετϦʔϜID ॏΈ ґଘؔ
HTTP/2 Priority Tree 0 3 128 5 64 7 16
9 16 σϑΥϧτͷॏΈ 16 σϑΥϧτͰετϦʔϜID 0 ʹґଘ͢Δ
HTTP/2 Priority Tree 0 3 128 5 64 7 16
9 16 Ϧιʔεɺ༏ઌॏΈͷ૬ରతͳൺͰܾఆ͞ΕΔɻ ετϦʔϜID 3 શϦιʔεͷ 2/3 ׂ͕ΓͯΒΕΔɻ
HTTP/2 Priority Tree 0 3 128 5 64 7 16
9 16 ଞͷετϦʔϜʹґଘ͢ΔετϦʔϜͷϦιʔεɺґଘઌετϦʔϜͷϦιʔεʹج͍ͮͯܭࢉ͞ΕΔɻ ετϦʔϜID 7 ɺετϦʔϜID 3 ͷϦιʔεͷ 1/2 (Ϧιʔεશମͷ 1/3) ׂ͕ΓͯΒΕΔɻ
࣮ʹ͓͚Δ 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 ͳ͠
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>
Firefox ͕ੜ͢Δ Priority Tree 9 1. ϦΫΤετલ 0 3 7
201 1 1 11 1 5 101 ༏ઌπϦʔ͕ॳظԽ͞ΕΔɻ ༏ઌશͯ PRIORITY ϑϨʔϜͰࢦఆ͞ΕΔɻ
Firefox ͕ੜ͢Δ Priority Tree 9 2. HTML ͷϦΫΤετ 0 3
7 201 1 1 13 32 11 1 5 101 HTML ͷϦΫΤετͷετϦʔϜɻ ༏ઌ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
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
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
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
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
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
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
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
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
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
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
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
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
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
Firefox ͕ੜ͢Δ Priority Tree ͷߟ • ࠷ॳʹ PRIORITY ϑϨʔϜͰͷେ͕ߏ͞ΕΔ •
CSS JSɺը૾ͷछྨ͝ͱʹॏΈ͚Λ͏·͍ͬͯ͘Δ • సૹͷॱং • ͓͓ΑͦɺCSSɺhead ཁૉ JSɺbody ཁૉ JSɺը૾ ͷॱʹͳ͍ͬͯΔ • Firefox ͕ҙਤͨ͠௨Γʹసૹ͞Ε͍ͯΔͱࢥΘΕΔ
Chrome ͕ੜ͢Δ Priority Tree 1. HTML ͷϦΫΤετ 0 1 256
HTML ͷϦΫΤετͷετϦʔϜɻ ༏ઌ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
5 Chrome ͕ੜ͢Δ Priority Tree 2. CSS ͷϦΫΤετ 0 1
256 3 220 220 7 220 CSS ͷϦΫΤετͷετϦʔϜɻ ༏ઌ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
5 Chrome ͕ੜ͢Δ Priority Tree 3. head ཁૉͷ JS ͷϦΫΤετ
0 1 256 3 220 220 7 220 9 183 11 183 13 183 head ཁૉͷ JS ͷϦΫΤετͷετϦʔϜɻ ༏ઌ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Chrome ͕ੜ͢Δ Priority Tree ͷߟ • શͯͷετϦʔϜ͕ ID 0 ʹґଘ͢Δߏ
• Firefox ͱൺֱ͢Δͱγϯϓϧͳ༏ઌͷׂΓͯ • ׂΓͯΒΕΔϦιʔεͷׂ߹ͷ͕ࠩগͳ͍ • CSS : JS : ը૾ = 10 : 8 : 5 • େ͖ͳը૾Ϧιʔε͕૿͑ΔͱɺCSS JS ͷసૹ્͕͞ΕΔՄೳੑ͕͋Γͦ͏ • ը૾ͷॏΈΛͬͱখͯ͘͞͠Α͍ͷ͔͠Εͳ͍
Edge ͕ੜ͢Δ Priority Tree 1. HTML ͷϦΫΤετ 0 1 16
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 ׂ͕ΓͯΒΕΔɻ
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
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
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
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
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
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
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
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
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
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
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
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
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
Edge ͕ੜ͢Δ Priority Tree ͷߟ • Firefox Chrome ͱҟͳΓ༏ઌະࢦఆ
• શͯͷετϦʔϜʹσϑΥϧτͷॏΈ 16 ׂ͕ΓͯΒΕΔ • ༏ઌ͕ະࢦఆͷͨΊɺαΠζͷখ͞ͳϦιʔε͔Βసૹ͕ྃ͢Δ • େ͖ͳը૾Ϧιʔε͕૿͑ΔͱɺCSS JS ͷసૹ͕େ્͖͘͞ΕΔՄೳੑ͕͋Γͦ͏ • ਖ਼ࣜ൛Ͱͷ༏ઌͷ࣮ʹظ
Server Push
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
࣮ʹ͓͚Δ 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 ͋Γ
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 ͕ൃಈ͠ͳ͍ ɹͳͲɺ͍͔͕ͭ݅͋͘ΔͷͰҙ͕ඞཁɻ
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>
0 Firefox ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 9 1.
HTML ͷϦΫΤετ 3 7 201 1 1 13 32 11 1 5 101
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 ϑϨʔϜ͕ૹ৴͞ΕͨετϦʔϜʹґଘ͢Δɻ
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 ϑϨʔϜʹΑΓґଘઌͱॏΈ͕มߋʹɻ ετϦʔϜͷσʔλ·ͩసૹதɻ
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
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
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
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
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
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
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
Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 1. HTML ͷϦΫΤετ
0 1 256
4 Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 2. ϓογϡετϦʔϜͷ։࢝
0 1 256 2 16 16 6 16 8 16 ϓογϡετϦʔϜͷετϦʔϜ ID ۮʹͳΔɻ PUSH_PROMISE ϑϨʔϜ͕ૹ৴͞ΕͨετϦʔϜʹґଘ͢Δɻ
4 Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴
0 1 256 2 16 16 6 16 8 16
4 Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴
0 1 256 2 16 16 6 16 8 16
4 Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴
0 1 256 2 16 16 6 16 8 16
4 Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴
0 1 256 2 16 16 6 16 8 16
4 Chrome ͕ੜ͢Δ Priority Tree (Server Push ͋Γ) 3. ϓογϡετϦʔϜͷड৴
0 1 256 2 16 16 6 16 8 16
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
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
Server Push ͷߟ • Firefox ϓογϡετϦʔϜͷ༏ઌΛௐ͢Δ • CSS ͷసૹʹӨڹ͕ͳ͍Α͏ʹɺґଘઌͱॏΈͷ྆ํΛมߋ •
༏ઌϒϥβϓογϡ͢ΔϦιʔεͷͳͲʹΑͬͯมԽ͢Δ • ࠓճݻఆαΠζͷΈͷݕূͩͬͨͷͰɺେ͖͍ը૾ͷϓογϡͳͲͷݕূඞཁ • ͓ͦΒ͘ϕετϓϥΫςΟεଘࡏ͠ͳ͍ͷͰɺຖճ͖ͪΜͱͨ͠ݕূ͕ඞཁ͔ • ͱΓ͋͑ͣ Server Push Λ͍͍ͨʁ • ༏ઌͷ͍Ϧιʔε͚ͩΛগͳ͍Ͱϓογϡ͢Εେ͖ͳʹͳΒͳͦ͞͏ • ྫ͑ΠϯϥΠϯʹ͍ͯͨ͠ը૾ͱ͔
͓ͬ͠ΌΔ௨ΓͰͨ͠…
·ͱΊ • HTTP/2 ͷύϑΥʔϚϯεΛཧղ͢ΔʹɺPriority ʹର͢Δཧղ͕ॏཁ • Priority ͷѻ͍ɺαʔόʔΫϥΠΞϯτ͝ͱʹҟͳΔ • ґଘؔॏΈ͚ͩͰͳ͘ɺϑΝΠϧαΠζϦΫΤετॱংͷߟྀඞཁ
• ࣮ࡍʹαʔόʔͱΫϥΠΞϯτΛΈ߹Θͤͯܭଌͯ͠ͳ͍ͱ͔Βͳ͍ࣄଟ͍ • Server Push Λ͏߹ɺPriority Λߟྀ͢Δඞཁ͕͋Δ • ϓογϡͷΓํʹΑͬͯɺϨϯμϦϯά͕͘ͳΔέʔε͋Γ͑ͦ͏ • Priority ؚΊ͖ͯͪΜͱܭଌ͠ɺධՁ͢Δඞཁ͕͋Δ
Thank you :-)