HTTP/2 Deep Dive: Priority & Server Push

Transcript

1. HTTP/2 Deep Dive:
   Priority & Server Push
   Moto Ishizawa
   @summerwind
   

   View Slide

2. Moto Ishizawa
   @summerwind
   

   View Slide

3. ͜ͷࢿྉͷτϐοΫ
   • HTTP/2 ͷ Priority ʹ͍ͭͯ
   • Priority ͷ࢓૊Έ
   • ࣮૷ʹ͓͚Δ Priority ͷαϙʔτঢ়گ
   • Priority ͕༗ޮͳ৔߹ͷετϦʔϜͷ࣮ࡍͷಈ͖
   • HTTP/2 ͷ Server Push ʹ͍ͭͯ
   • Server Push ͷ࢓૊Έ
   • ࣮૷ʹ͓͚Δ Server Push ͷαϙʔτঢ়گ
   • Preload Λ༻͍ͨ Server Push
   • Server Push ͱ Priority ͷؔ܎
   

   View Slide

4. Priority
   

   View Slide

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
   

   View Slide

6. HTTP/2 Priority Tree
   0
   3
   128
   5
   64
   7
   16
   9
   16
   ετϦʔϜID
   ॏΈ
   ґଘؔ܎
   

   View Slide

7. HTTP/2 Priority Tree
   0
   3
   128
   5
   64
   7
   16
   9
   16
   σϑΥϧτͷॏΈ͸ 16
   σϑΥϧτͰ͸ετϦʔϜID 0 ʹґଘ͢Δ
   

   View Slide

8. HTTP/2 Priority Tree
   0
   3
   128
   5
   64
   7
   16
   9
   16
   Ϧιʔε͸ɺ༏ઌ౓͸ॏΈͷ૬ରతͳൺ཰Ͱܾఆ͞ΕΔɻ
   ετϦʔϜID 3 ͸શϦιʔεͷ 2/3 ׂ͕Γ౰ͯΒΕΔɻ
   

   View Slide

9. HTTP/2 Priority Tree
   0
   3
   128
   5
   64
   7
   16
   9
   16
   ଞͷετϦʔϜʹґଘ͢ΔετϦʔϜͷϦιʔε͸ɺґଘઌετϦʔϜͷϦιʔεʹج͍ͮͯܭࢉ͞ΕΔɻ
   ετϦʔϜID 7 ͸ɺετϦʔϜID 3 ͷϦιʔεͷ 1/2 (Ϧιʔεશମͷ 1/3) ׂ͕Γ౰ͯΒΕΔɻ
   

   View Slide

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 ͳ͠
    

    View Slide

11. Priority ͷݕূ
    • ݕূ༻ͷϖʔδΛ֤ϒϥ΢βͰಡΈࠐΉ
    • αʔόʔ͸ nghttpx 1.0.0 Λ࢖༻
    • ݕূ༻ϖʔδͷ࢓༷
    • head ཁૉ಺ʹ഑ஔͨ͠ CSS × 3
    • head ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3
    • body ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3
    • body ཁૉ಺ʹ഑ஔͨ͠ը૾ × 3
    • ϦιʔεͷαΠζ͸શͯ 100 KB
    
    
    
    
    Test
    
    
    
    
    
    
    
    
    Test
    
    
    
    
    
    
    
    
    

    View Slide

12. Firefox ͕ੜ੒͢Δ Priority Tree
    9
    1. ϦΫΤετલ
    0
    3 7
    201 1
    1
    11
    1
    5
    101
    ༏ઌ౓πϦʔ͕ॳظԽ͞ΕΔɻ

    ༏ઌ౓͸શͯ PRIORITY ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

13. Firefox ͕ੜ੒͢Δ Priority Tree
    9
    2. HTML ΁ͷϦΫΤετ
    0
    3 7
    201 1
    1
    13
    32
    11
    1
    5
    101
    HTML ΁ͷϦΫΤετͷετϦʔϜɻ
    ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. Firefox ͕ੜ੒͢Δ Priority Tree ͷߟ࡯
    • ࠷ॳʹ PRIORITY ϑϨʔϜͰ໦ͷେ࿮͕ߏ੒͞ΕΔ
    • CSS ΍ JSɺը૾ͷछྨ͝ͱʹॏΈ෇͚Λ͏·͘΍͍ͬͯΔ
    • సૹͷॱং
    • ͓͓ΑͦɺCSSɺhead ཁૉ಺ JSɺbody ཁૉ಺ JSɺը૾ ͷॱʹͳ͍ͬͯΔ
    • Firefox ͕ҙਤͨ͠௨Γʹసૹ͞Ε͍ͯΔͱࢥΘΕΔ
    

    View Slide

32. Chrome ͕ੜ੒͢Δ Priority Tree
    1. HTML ΁ͷϦΫΤετ
    0
    1
    256
    HTML ΁ͷϦΫΤετͷετϦʔϜɻ
    ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

33. 5
    Chrome ͕ੜ੒͢Δ Priority Tree
    2. CSS ΁ͷϦΫΤετ
    0
    1
    256
    3
    220 220
    7
    220
    CSS ΁ͷϦΫΤετͷετϦʔϜɻ
    ༏ઌ౓͸ HEADERS ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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 ϑϨʔϜͰࢦఆ͞ΕΔɻ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

50. Chrome ͕ੜ੒͢Δ Priority Tree ͷߟ࡯
    • શͯͷετϦʔϜ͕ ID 0 ʹґଘ͢Δߏ੒
    • Firefox ͱൺֱ͢Δͱγϯϓϧͳ༏ઌ౓ͷׂΓ౰ͯ
    • ׂΓ౰ͯΒΕΔϦιʔεͷׂ߹ͷ͕ࠩগͳ͍
    • CSS : JS : ը૾ = 10 : 8 : 5
    • େ͖ͳը૾Ϧιʔε͕૿͑ΔͱɺCSS ΍ JS ͷసૹ્͕֐͞ΕΔՄೳੑ͕͋Γͦ͏
    • ը૾ͷॏΈΛ΋ͬͱখͯ͘͞͠΋Α͍ͷ͔΋͠Εͳ͍
    

    View Slide

51. Edge ͕ੜ੒͢Δ Priority Tree
    1. HTML ΁ͷϦΫΤετ
    0
    1
    16
    

    View Slide

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 ׂ͕Γ౰ͯΒΕΔɻ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. Edge ͕ੜ੒͢Δ Priority Tree ͷߟ࡯
    • Firefox ΍ Chrome ͱ͸ҟͳΓ༏ઌ౓͸ະࢦఆ
    • શͯͷετϦʔϜʹσϑΥϧτͷॏΈ 16 ׂ͕Γ౰ͯΒΕΔ
    • ༏ઌ౓͕ະࢦఆͷͨΊɺαΠζͷখ͞ͳϦιʔε͔Βసૹ͕׬ྃ͢Δ
    • େ͖ͳը૾Ϧιʔε͕૿͑ΔͱɺCSS ΍ JS ͷసૹ͕େ્͖͘֐͞ΕΔՄೳੑ͕͋Γͦ͏
    • ਖ਼ࣜ൛Ͱͷ༏ઌ౓ͷ࣮૷ʹظ଴
    

    View Slide

67. Server Push
    

    View Slide

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
    

    View Slide

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 ͋Γ
    

    View Slide

70. Preload ʹΑΔ Server Push
    Link: ; rel=preload
    Link: ; rel=preload
    nghttp2 ΍ H2O ͸ Preload ࢓༷ʹج͍ͮͨ Server Push Λαϙʔτ͍ͯ͠Δɻ
    ͜ΕΒͷαʔόʔΛ Reverse Proxy ͱͯ͠࢖༻͍ͯ͠Δ৔߹ɺΦϦδϯαʔόʔͷϨεϙϯεʹ
    ҎԼͷΑ͏ͳ Link ϔομʔΛ෇༩͓ͯ͘͜͠ͱͰɺϔομʔʹࢦఆͨ͠ϦιʔεΛ Proxy ͕ࣗಈ
    औಘ্ͨ͠ͰɺServer Push ͱͯ͠ɺͦͷϦιʔεΛΫϥΠΞϯτʹૹ৴͢Δɻ
    ※ nghttp2 ʹ෇ଐͷ nghttpx ͸ɺΦϦδϯαʔόʔ͕ฦ͢Ϩεϙϯεͷεςʔλε͕ 200 Ͱͳ͍ͱ Server Push ͕ൃಈ͠ͳ͍
    ɹͳͲɺ͍͔ͭ͘৚͕݅͋ΔͷͰ஫ҙ͕ඞཁɻ
    

    View Slide

71. Server Push Λ૊Έ߹Θͤͨ Priority ͷݕূ
    • ࣮ࢪํ๏͸ Priority ͷݕূ࣌ͱಉ͡
    • αʔόʔϓογϡ͸ Preload ํࣜΛ࢖༻
    • ݕূ༻ϖʔδͷ࢓༷ΛҰ෦มߋ
    • head ཁૉ಺ʹ഑ஔͨ͠ CSS × 3
    • head ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3
    • body ཁૉ಺ʹ഑ஔͨ͠ JavaScript × 3
    • body ཁૉ಺ʹ഑ஔͨ͠ը૾ × 3
    • ֤Ϧιʔεͷ࠷ॳͷ1ݸ໨͸ϓογϡ͢Δ
    
    
    
    
    Test
    
    
    
    
    
    
    
    
    Test
    
    
    
    
    
    
    
    
    

    View Slide

72. 0
    Firefox ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    9
    1. HTML ΁ͷϦΫΤετ
    3 7
    201 1
    1
    13
    32
    11
    1
    5
    101
    

    View Slide

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 ϑϨʔϜ͕ૹ৴͞ΕͨετϦʔϜʹґଘ͢Δɻ
    

    View Slide

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 ϑϨʔϜʹΑΓґଘઌͱॏΈ͕มߋʹɻ
    ετϦʔϜͷσʔλ͸·ͩసૹதɻ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

82. Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    1. HTML ΁ͷϦΫΤετ
    0
    1
    256
    

    View Slide

83. 4
    Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    2. ϓογϡετϦʔϜͷ։࢝
    0
    1
    256
    2
    16 16
    6
    16
    8
    16
    ϓογϡετϦʔϜͷετϦʔϜ ID ͸ۮ਺ʹͳΔɻ
    PUSH_PROMISE ϑϨʔϜ͕ૹ৴͞ΕͨετϦʔϜʹґଘ͢Δɻ
    

    View Slide

84. 4
    Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    3. ϓογϡετϦʔϜͷड৴
    0
    1
    256
    2
    16 16
    6
    16
    8
    16
    

    View Slide

85. 4
    Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    3. ϓογϡετϦʔϜͷड৴
    0
    1
    256
    2
    16 16
    6
    16
    8
    16
    

    View Slide

86. 4
    Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    3. ϓογϡετϦʔϜͷड৴
    0
    1
    256
    2
    16 16
    6
    16
    8
    16
    

    View Slide

87. 4
    Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    3. ϓογϡετϦʔϜͷड৴
    0
    1
    256
    2
    16 16
    6
    16
    8
    16
    

    View Slide

88. 4
    Chrome ͕ੜ੒͢Δ Priority Tree (Server Push ͋Γ)
    3. ϓογϡετϦʔϜͷड৴
    0
    1
    256
    2
    16 16
    6
    16
    8
    16
    

    View Slide

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
    

    View Slide

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
    

    View Slide

91. Server Push ͷߟ࡯
    • Firefox ͸ϓογϡετϦʔϜͷ༏ઌ౓Λௐ੔͢Δ
    • CSS ͷసૹʹӨڹ͕ͳ͍Α͏ʹɺґଘઌͱॏΈͷ྆ํΛมߋ
    • ༏ઌ౓͸ϒϥ΢β΍ϓογϡ͢ΔϦιʔεͷ਺ͳͲʹΑͬͯมԽ͢Δ
    • ࠓճ͸ݻఆαΠζͷΈͷݕূͩͬͨͷͰɺେ͖͍ը૾ͷϓογϡͳͲͷݕূ΋ඞཁ
    • ͓ͦΒ͘ϕετϓϥΫςΟε͸ଘࡏ͠ͳ͍ͷͰɺຖճ͖ͪΜͱͨ͠ݕূ͕ඞཁ͔΋
    • ͱΓ͋͑ͣ Server Push Λ࢖͍͍ͨʁ
    • ༏ઌ౓ͷ௿͍Ϧιʔε͚ͩΛগͳ͍਺Ͱϓογϡ͢Ε͹େ͖ͳ໰୊ʹ͸ͳΒͳͦ͞͏
    • ྫ͑͹ΠϯϥΠϯʹ͍ͯͨ͠ը૾ͱ͔
    

    View Slide

92. ͓ͬ͠ΌΔ௨ΓͰͨ͠…
    

    View Slide

93. ·ͱΊ
    • HTTP/2 ͷύϑΥʔϚϯεΛཧղ͢Δʹ͸ɺPriority ʹର͢Δཧղ͕ॏཁ
    • Priority ͷѻ͍͸ɺαʔόʔ΍ΫϥΠΞϯτ͝ͱʹҟͳΔ
    • ґଘؔ܎΍ॏΈ͚ͩͰͳ͘ɺϑΝΠϧαΠζ΍ϦΫΤετॱংͷߟྀ΋ඞཁ
    • ࣮ࡍʹαʔόʔͱΫϥΠΞϯτΛ૊Έ߹Θͤͯܭଌͯ͠ͳ͍ͱ෼͔Βͳ͍ࣄ΋ଟ͍
    • Server Push Λ࢖͏৔߹΋ɺPriority Λߟྀ͢Δඞཁ͕͋Δ
    • ϓογϡͷ΍ΓํʹΑͬͯ͸ɺϨϯμϦϯά͕஗͘ͳΔέʔε΋͋Γ͑ͦ͏
    • Priority ΋ؚΊ͖ͯͪΜͱܭଌ͠ɺධՁ͢Δඞཁ͕͋Δ
    

    View Slide

94. Thank you :-)
    

    View Slide