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

Understanding HTTP/2 prioritization

Avatar for Moto Ishizawa Moto Ishizawa
June 15, 2015
Technology
16
6.3k

Understanding HTTP/2 prioritization

Avatar for Moto Ishizawa

Moto Ishizawa

June 15, 2015
Tweet

More Decks by Moto Ishizawa

See All by Moto Ishizawa
LLM エージェントを使った実験
Avatar for Moto Ishizawa summerwind
0
1.2k
カンムにおけるプロダクトセキュリティのこれまでとこれから
Avatar for Moto Ishizawa summerwind
1
2.8k
Sharing test cases of internet protocols with Go and OCI Artifacts
Avatar for Moto Ishizawa summerwind
0
1.1k
Using Thanos as a long-term storage for your Prometheus metrics
Avatar for Moto Ishizawa summerwind
1
12k
Using Kubernetes as a datastore for SPIRE
Avatar for Moto Ishizawa summerwind
1
1.1k
Whitebox Controller
Avatar for Moto Ishizawa summerwind
5
1.8k
Managing Kubernetes manifests with Spruce
Avatar for Moto Ishizawa summerwind
2
4.3k
HTTP/2 Deep Dive: Priority & Server Push
Avatar for Moto Ishizawa summerwind
17
3.5k
HTTP/2 Server Push Considered Harmful
Avatar for Moto Ishizawa summerwind
1
2.1k

Other Decks in Technology

See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
Avatar for Masato Ishigaki / 石垣雅人 i35_267
2
7.1k
PHPでWebブラウザのレンダリングエンジンを実装する
Avatar for ディップ株式会社 dip_tech
PRO
0
220
Tech-Verse 2025 Keynote
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
1.5k
PO初心者が考えた ”POらしさ”
Avatar for (Ha)rady nb_rady
0
150
本が全く読めなかった過去の自分へ
Avatar for ゲンシュン genshun9
0
730
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
3.9k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
1
8.1k
タイミーのデータモデリング事例と今後のチャレンジ
Avatar for Toshiki Tsuchikawa ttccddtoki
6
2.1k
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
160
Glacierだからってコストあきらめてない？ / JAWS Meet Glacier Cost
Avatar for sasaki taishin
1
110
mrubyと micro-ROSが繋ぐロボットの世界
Avatar for Katsuhiko Kageyama kishima
3
390
Tokyo_reInforce_2025_recap_iam_access_analyzer
Avatar for h-ashisan hiashisan
0
160

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
680
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
125
52k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
940
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
270
20k

Transcript

  1. Understanding HTTP/2 prioritization Moto Ishizawa @summerwind

  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

  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

  4. Priority Tree 0 3 128 5 64 7 16 9

    16 Stream ID Weight Dependency

  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.

  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.

  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

  8. Testing the prioritization of browsers • Test page • CSS

    in the <head> × 3 • Javascript in the <head> × 3 • JavaScript in the <body> × 3 • Image in the <body> × 3 • Size of all resources: 100KB • Server • nghttpx v1.0.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>

  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.

  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.

  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.

  12. Firefox’s Priority Tree 9 25 4. JavaScript in the <head>

    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.

  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.

  14. Firefox’s Priority Tree 9 25 6. JavaScript in the <body>

    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.

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  28. Firefox’s Timeline 13 15 17 19 21 23 25 27

    29 31 33 35 37 HEADERS (Request) HEADERS (Response) DATA

  29. Chrome’s Priority Tree 1. HTML 0 1 256 Stream for

    HTML. Prioritized by HEADERS frame.

  30. 5 Chrome’s Priority Tree 2. CSS 0 1 256 3

    220 220 7 220 Streams for CSS.
 Prioritized by HEADERS frames.

  31. 5 Chrome’s Priority Tree 3. JavaScript in the <head> 0

    1 256 3 220 220 7 220 9 183 11 183 13 183 Streams for JavaScript. Prioritized by HEADERS frames.

  32. 5 Chrome’s Priority Tree 4. JavaScript in the <body> 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.

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  47. Chrome’s Timeline 1 3 5 7 9 11 13 15

    17 19 21 23 25 HEADERS (Request) HEADERS (Response) DATA

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

  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.

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  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

  63. Edge’s Timeline 1 3 5 7 9 11 13 15

    17 19 21 23 25 HEADERS (Request) HEADERS (Response) DATA

  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...

  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...

  66. Thanks!