HTTP/2 Deep Dive: Priority & Server Push

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