Browsers open extra connections in anticipation of additional requests

Browsers can open extra connections or pre-stage open connections to improve the user experience.  You can see this if you build your own web server for IoT devices or monitor the connections and not just the requests.  These pre-staged connections do not show up in the browser developer tools.

I was troubleshooting a connection timeout issue in a Python-based web server where there were sometimes suspicious connections that timed out.  All my testing was done via a browser rather than Postman so I decided to investigate if it was a browser issue or a problem with my service.  The developer tools console in Chrome did not show the extra connection in the network traces.

The Python web server generating the logs has a 10-second connection timeout. A single browser action appears to generate two inbound connection requests but only one HTTP request. The 2nd inbound connection appears to be timing out if the user doesn't click on or initiate any additional browser action.

Got a connection from ('127.0.0.1', 64753)

Request Bytes:706

Request Processing: GET /?out_0=off HTTP/1.1

Parameters: {'out_0': 'off'}

Connection closed

Got a connection from ('127.0.0.1', 64754)

Connection closed on error timed out None

Using Wireshark 

Neither the Chrome Browser nor the Edge Browser showed any 2nd connection.  I installed Wireshark and set it up to capture inbound traffic on localhost. Then I hit return in the URL bar and saw that two connections were opened to the python server within 5 seconds. This called for more investigation

The HTML contains a markup that causes the browser to not fetch favicon.ico and the trace shows that no favicon.ico request was made.

Chrome: Refresh the URL

This trace shows two sockets opened up when I hit the reload request.  The first request is the reloaded HTTP GET on "/".  The second request comes about 0.5 seconds after the first.  No HTTP request is made on the second socket.  The Python code times out the open connection after 10 seconds.  You see this around the 10.57 timestamp.  Sometime later the Browser attempts to keep the socket open.

Chrome: 2 Button Clicks that both do a GET

This trace shows two sockets opened up when I hit the reload request.  The first request is clicking on a link on the page.  The second socket opening comes about 0.55 seconds after the first.  I then click on a 2nd link about 5 seconds after that and the request is processed on the previously opened socket.

Edge: Retains two open connections

I hit the reload button in edge and ended up with two timeout messages in the logs. Wireshark shows that Edge immediately opens two connections.  One services the inbound GET request and the other waits.  The inbound requests are processed in about 0.5 seconds like the Chrome numbers above.  Edge then opens the 3rd connection so that it has two available.  The 2nd connection times out at about the 10-second mark in line with our connection timeout.  The 3rd connection times out 10 seconds after that.

Edge: An example of connection staging

This example shows how Edge appears to manage connections across two GET requests.  In this case, these were hitting the return key in the URL bar.  The browser immediately opens two connections.  The first connection handles the GET request.  A third connection is opened when the first connection completes.  The button on the page generates the GET request around the 4.8 second mark.  The python server times out the 3rd connection 10 seconds later at the 14.8 second mark. Then there is some other activity at the 30-second mark, probably the browser timeout.

Video Walkthrough

Revision History

Created 2022 12