Understanding HTTP/2 prioritization

Transcript

Understanding HTTP/2 prioritization Moto Ishizawa @summerwind

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

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 aﬀects the rendering • Prioritization might adversely aﬀect the critical rendering path

Priority Tree 0 3 128 5 64 7 16 9

16 Stream ID Weight Dependency

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.

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.

Implementation status Server Name Version Support nghttp2 1.0.2 YES H2O

1.2.0 YES Apache Trafﬁc 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

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>

Firefox’s Priority Tree 9 1. Initialization 0 3 7 201

1 1 11 1 5 101 Initializing the priority tree by PRIORITY frames.

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.

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.

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.

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML. Prioritized by HEADERS frame.

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

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

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.

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Edge’s Priority Tree 1. HTML 0 1 16

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 diﬀerence 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...

Conclusion • HTTP/2 prioritization consists of dependency and weight •

Client notifies the priority, server builds the priority tree • Each browser have diﬀerent prioritization strategy • The use of priority dependencies may produce better results • Need to measurement the eﬀect of HTTP/2 prioritization! • But there is no tool that can measure the prioritization of HTTP/2...

Understanding HTTP/2 prioritization

Understanding HTTP/2 prioritization

More Decks by Moto Ishizawa

Other Decks in Technology

Featured

Transcript