HTTP/2资源请求与流的映射规则及浏览器处理策略问询

Great questions about HTTP/2—let’s break this down clearly, since these concepts are key to understanding how modern browsers load resources efficiently.

1. How do HTTP/2 client resource requests map to streams? #

By default, it’s a one-to-one mapping: every individual resource request (whether it’s an HTML document, CSS file, JavaScript bundle, image, font, etc.) gets its own dedicated HTTP/2 stream.

Here’s why this works: Each HTTP/2 stream represents a single bidirectional request-response pair. Streams are independent but share the same TCP connection (thanks to multiplexing), so multiple resources can be transferred in parallel without the head-of-line blocking issues of HTTP/1.1.

You can’t use a single stream to transmit multiple distinct resources. While a stream can send a response in chunks (using Transfer-Encoding: chunked), those chunks belong to the same resource—you can’t split multiple resource responses into parts of a single stream. The only exception is server push, where the server initiates streams to send resources the client hasn’t requested yet, but even those are separate streams per resource.

2. What’s the difference between stream priority and stream dependency? #

Both affect resource loading order, but they’re distinct concepts:

Stream Priority #

• This is a relative weight (0-256) assigned to an individual stream, telling the server how important that stream is compared to others. Higher weights mean the server should allocate more bandwidth or process the stream earlier.
• For example, a browser might assign a weight of 256 (highest) to a critical CSS file, and 128 to a non-critical image.

Stream Dependency #

• This defines a hierarchical relationship between streams: Stream B can declare a dependency on Stream A, which means the server should prioritize Stream A before (or alongside) Stream B. Think of it as "Stream B’s resource depends on Stream A’s resource to be useful."
• For example, a CSS stream might depend on the HTML stream (since the browser needs the HTML to discover the CSS link), and an image stream might depend on the CSS stream (if the image is a background image referenced in the CSS).

Key Differences #

• Priority is a standalone property of a single stream; dependency is a relationship between two or more streams.
• Priority controls relative bandwidth allocation or processing order between unrelated streams; dependency enforces a loading hierarchy where one stream’s completion (or progress) is required for another to be useful.
• They often work together: A high-priority stream that’s also a dependency of many other streams will be the first to get processed.

3. Common browser strategies for handling streams and dependencies #

Browsers have standardized (but slightly varying) strategies to optimize resource loading using HTTP/2 streams:

• Root stream prioritization: The initial HTML document request is treated as the root stream with the highest priority. All other resource streams typically declare a dependency on this root stream, since the browser can’t discover other resources until it parses the HTML.
• Critical resource weighting: CSS and JavaScript files (especially those needed for above-the-fold rendering) get the highest priority weights. Images, fonts, and other non-critical resources get lower weights.
• Dynamic dependency chaining: As the browser parses the HTML, it creates streams for discovered resources and sets up dependencies automatically. For example, a <link rel="stylesheet"> tag will trigger a stream that depends on the HTML stream; a background image in that CSS will trigger a stream that depends on the CSS stream.
• Viewport-based priority adjustment: When the user scrolls, browsers will boost the priority of streams for images or resources entering the viewport, and lower priority for those leaving it.
• Concurrent stream limits: While HTTP/2 allows hundreds of concurrent streams per connection, browsers cap this (e.g., Chrome uses a default limit of 100 streams per origin) to avoid overwhelming servers.
• Stream cancellation: If a resource is no longer needed (e.g., the user navigates away from the page, or a CSS file is replaced), the browser sends a RST_STREAM frame to cancel the corresponding stream, freeing up bandwidth for other requests.

内容的提问来源于stack exchange，提问作者Midi