Remember the number of parallel HTTP connections that trigger the browser at a time

1. Demand background

The background of live broadcast review developed by the company requires multiple live broadcast videos to be manually reviewed on the same page to prevent anchors from being too free.

2. Error feedback

usechromedebug

When the number of online anchors is greater than6From the first7None of the subsequent anchor videos from the beginning can be displayed.

The video format is FLV, so flv.js is used, and the error message is (note: this error is not the player error, but the video stream error keywordIOException)

3. Investigation process

The error message shows code 403.

403 Forbidden Is a Status Code in the HTTP protocol. You do not have permission to access this site. This status indicates that the server understands the request but refuses to execute the task. The request should not be resent to the server. In cases where the HTTP request method is not "HEAD" and the server wants the client to know why the permission is not available, the server should describe the reason for the rejection in the return message. In cases where the server does Not want to provide any feedback, the server can use 404 Not Found instead of 403 Forbidden.Copy the code

The error code 403 is displayed, so the initial guess is that the server may have a risk control measure, the same user request video stream too many rejected. My colleague helped to contact the supplier, and the response was that there was no restriction. I happened to be reading the HTTP Guru’s Guide these days and vaguely remembered that HTTP requests have the maximum number of parallel connections (see Listing 1), so I flipped the book:

HTTP allows clients to open multiple connections and perform multiple HTTP transactions in parallel. Even though parallel connections may be faster, they are not always faster. When the network bandwidth on the client side is low, most of the time may be spent transferring data, in which case an HTTP transaction connected to a faster server can easily use up all available Modem bandwidth. If multiple objects are loaded in parallel, each competing for limited bandwidth, each pair will load at a slower rate and scale, resulting in little or no performance gain. Also, having a large number of connections open consumes a lot of memory resources, which can cause its own performance problems. Browsers do use parallel links, but they limit the total number of parallel connections to a small value (typically four). The server can shut down excessive connections from specific clients at will.Copy the code

To sum up:

HTTP for performance optimization, multiple HTTP transactions can be executed simultaneously to optimize the experience. However, due to bandwidth and memory resource limitations, unlimited concurrency also has an impact on HTTP performance. A server can also close a connection from a particular client.

There are two guesses about this error: 1. The maximum number of concurrent connections in the browser causes 2. Server rejection

So how do we determine whether it’s a server or a browser?

4. Verify

How do you test that? I wrote a small demo that initializes 8 player objects using the same video stream address.It can be seen that Video7 and Video8 cannot be displayed. These two videos are in wait state when viewed in network request

Request to wait:

Wait after timeout:

Normal request:

After the console destroys player instances 1 and 2, player instances 7 and 8, which could not be played earlier, are immediately reconnectedAs you can see, a Chrome process supports only six concurrent requests. Start another browser process, such as Edge, which is not limited to 6 concurrent processes.

5. Solutions

Generally we don’t need to solve this, web resources are automatically loaded, unless, as I did, we encounter a need like this. We can load multiple domains simultaneously by changing the domain name. For example: jingdong image domain has always been the domain 360buyimg.com.

http://img13.360buyimg.com/da/jfs/t1879/131/2924301202/126044/7c7cbf5c/56f3b58fN37c1340a.jpg
Copy the code

Img13 can be changed to img1, img2. In short, you can access a resource by binding it to a CDN configured with multiple domain names.

6. Summary

Some problems in the development process may not have been exposed to the relevant knowledge, we can use experience to guess, and then find the corresponding knowledge, according to their own ideas step by step verification.

I also found that some browsers limit concurrent links to a number of tables.