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

Understanding HTTP/2 prioritization

Understanding HTTP/2 prioritization

Moto Ishizawa

June 15, 2015
Tweet

More Decks by Moto Ishizawa

Other Decks in Technology

Transcript

  1. Understanding HTTP/2 prioritization
    Moto Ishizawa
    @summerwind

    View full-size slide

  2. Who? :-)
    • Platform Engineer @ Yahoo! JAPAN
    • Beacon platforms, Data pipelines
    • Reviewer of HPBN Japanese Edition
    • Sections: HTTP/1.1, HTTP/2, WebRTC
    • HTTP/2 Japan Community
    • RFC7540 Japanese Translation, h2spec

    View full-size slide

  3. HTTP/2 Prioritization
    • HTTP/2 client controls the transmission order of resources by priority
    • Priority is expressed by dependency and weight
    • Priority is a hint, server may ignore it
    • In the browser, there is a possibility that the priority affects the rendering
    • Prioritization might adversely affect the critical rendering path

    View full-size slide

  4. Priority Tree
    0
    3
    128
    5
    64
    7
    16
    9
    16
    Stream ID
    Weight
    Dependency

    View full-size slide

  5. Priority Tree
    0
    3
    128
    5
    64
    7
    16
    9
    16
    All streams are set weight 16 by default.
    All streams depend on the Stream ID 0 by default.

    View full-size slide

  6. Priority Tree
    0
    3
    128
    5
    64
    7
    16
    9
    16
    The priority of the stream is determined by the relative proportions of the weights.
    Stream ID 3 should receive two-thirds of available resources.
    The priority of the stream that depends on another stream is determined by the weight of dependent stream.
    Stream ID 7 should receive half of the resources of Stream ID 3.

    View full-size slide

  7. Implementation status
    Server
    Name Version Support
    nghttp2 1.0.2 YES
    H2O 1.2.0 YES
    Apache Traffic Server 5.3.0 NO
    Browser
    Name Version Support
    Firefox 38.0.5 YES
    Chrome 43.0.2357.65 YES (Weight only)
    Edge 0.11.10074.0 (Preview) NO
    Safari 9,0 (Preview) NO

    View full-size slide

  8. Testing the prioritization of browsers
    • Test page
    • CSS in the × 3
    • Javascript in the × 3
    • JavaScript in the × 3
    • Image in the × 3
    • Size of all resources: 100KB
    • Server
    • nghttpx v1.0.1




    Test








    Test








    View full-size slide

  9. Firefox’s Priority Tree
    9
    1. Initialization
    0
    3 7
    201 1
    1
    11
    1
    5
    101
    Initializing the priority tree by PRIORITY frames.

    View full-size slide

  10. Firefox’s Priority Tree
    9
    2. HTML
    0
    3 7
    201 1
    1
    13
    32
    11
    1
    5
    101
    Stream for HTML.
    Prioritized by HEADERS frame.

    View full-size slide

  11. Firefox’s Priority Tree
    9
    3. CSS
    0
    3 7
    201 1
    1
    13
    32
    19
    32
    17
    32
    15
    32
    11
    1
    5
    101
    Streams for CSS.

    Prioritized by HEADERS frames.

    View full-size slide

  12. Firefox’s Priority Tree
    9
    25
    4. JavaScript in the
    0
    3 7
    201 1
    1
    32
    13
    32
    19
    32
    21
    32
    23
    32
    17
    32
    15
    32
    11
    1
    5
    101
    Streams for JavaScript.

    Prioritized by HEADERS frames.

    View full-size slide

  13. Firefox’s Priority Tree
    9
    25
    5. Image
    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
    Streams for Image.
    Prioritized by HEADERS frames.

    View full-size slide

  14. Firefox’s Priority Tree
    9
    25
    6. JavaScript in the
    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
    Streams for JavaScript.
    Prioritized by HEADERS frames.

    View full-size slide

  15. Firefox’s Priority Tree
    9
    25
    7. Download
    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

  16. Firefox’s Priority Tree
    9
    25
    7. Download
    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

  17. Firefox’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Priority Tree
    9
    25
    7. Download
    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’s Timeline
    13
    15
    17
    19
    21
    23
    25
    27
    29
    31
    33
    35
    37
    HEADERS (Request)
    HEADERS (Response)
    DATA

    View full-size slide

  29. Chrome’s Priority Tree
    1. HTML
    0
    1
    256
    Stream for HTML.
    Prioritized by HEADERS frame.

    View full-size slide

  30. 5
    Chrome’s Priority Tree
    2. CSS
    0
    1
    256
    3
    220 220
    7
    220
    Streams for CSS.

    Prioritized by HEADERS frames.

    View full-size slide

  31. 5
    Chrome’s Priority Tree
    3. JavaScript in the
    0
    1
    256
    3
    220 220
    7
    220
    9
    183
    11
    183
    13
    183
    Streams for JavaScript.
    Prioritized by HEADERS frames.

    View full-size slide

  32. 5
    Chrome’s Priority Tree
    4. JavaScript in the
    0
    1
    256
    15
    183
    17
    183
    19
    183
    3
    220 220
    7
    220
    9
    183
    11
    183
    13
    183
    Streams for JavaScript.
    Prioritized by HEADERS frames.

    View full-size slide

  33. 5
    Chrome’s Priority Tree
    5. Image
    0
    1
    256
    3
    220 220
    7
    220
    9
    183
    11
    183
    13
    183
    21
    110
    23
    110
    25
    110
    Streams for Image.
    Prioritized by HEADERS frames.
    15
    183
    17
    183
    19
    183

    View full-size slide

  34. 5
    Chrome’s Priority Tree
    6. Download
    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

  35. 5
    Chrome’s Priority Tree
    6. Download
    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

  36. 5
    Chrome’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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’s Priority Tree
    6. Download
    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. Chrome’s Timeline
    1
    3
    5
    7
    9
    11
    13
    15
    17
    19
    21
    23
    25
    HEADERS (Request)
    HEADERS (Response)
    DATA

    View full-size slide

  48. Edge’s Priority Tree
    1. HTML
    0
    1
    16

    View full-size slide

  49. 5
    Edge’s Priority Tree
    2. CSS, JavaScript, Image
    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
    Streams for CSS, JavaScript, and Image.

    Priority is not specified. Default value is used.

    View full-size slide

  50. 5
    Edge’s Priority Tree
    3. Download
    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

  51. 5
    Edge’s Priority Tree
    3. Download
    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

  52. 5
    Edge’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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’s Priority Tree
    3. Download
    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. Edge’s Timeline
    1
    3
    5
    7
    9
    11
    13
    15
    17
    19
    21
    23
    25
    HEADERS (Request)
    HEADERS (Response)
    DATA

    View full-size slide

  64. The prioritization strategy of browsers
    • Firefox builds the priority tree that is optimized for Web pages
    • Priority order: CSS, JavaScript, Images
    • Chrome reuses the prioritization strategy of SPDY era that is used only weight
    • The difference in weight is small… there is room for optimization!
    • Edge does not support the prioritization
    • It seems to control the download of the resource by the timing of request...

    View full-size slide

  65. Conclusion
    • HTTP/2 prioritization consists of dependency and weight
    • Client notifies the priority, server builds the priority tree
    • Each browser have different prioritization strategy
    • The use of priority dependencies may produce better results
    • Need to measurement the effect of HTTP/2 prioritization!
    • But there is no tool that can measure the prioritization of HTTP/2...

    View full-size slide