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

HTTP/2 Deep Dive: Priority & Server Push

HTTP/2 Deep Dive: Priority & Server Push

Moto Ishizawa

May 21, 2015
Tweet

More Decks by Moto Ishizawa

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Moto Ishizawa
    @summerwind

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. ࣮૷ʹ͓͚Δ 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 full-size slide

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




    Test








    Test








    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  51. 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 full-size slide

  52. 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  66. 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 full-size slide

  67. ࣮૷ʹ͓͚Δ 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 full-size slide

  68. 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 full-size slide

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




    Test








    Test








    View full-size slide

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

    View full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

  73. 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 full-size slide

  74. 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 full-size 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 full-size 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 full-size 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 full-size slide

  78. 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 full-size slide

  79. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. 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 full-size slide

  88. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  92. Thank you :-)

    View full-size slide