Dynamically adding a <link> with rel=preconnect using JavaScript - does it work?

Question

Context: The user can click a button to open a gallery of images. The images are hosted on a different domain. The vast majority of users do not open the gallery. But if a user takes a certain "trigger" action, they're much more likely to open the gallery in the next several seconds. So I want to pre-connect to the image hosting domain only if the user takes the "trigger" action.

Question: Does the following code work as intended?

if(userHasTakenTriggerAction) {
  let link = document.createElement("link");
  link.href = "https://imagehostdomain.com";
  link.rel = "preconnect";
  document.head.appendChild(link);
}

I've tried it in Chrome, and I'm not sure how to test whether it's working properly - I don't see any network activity when I execute the above code.

I was thinking that I could just potentially just load a small "dummy" image from that domain as a way to "pre-connect", but I'm curious if the above code would/should work, according to the spec.

(Bonus question: Would it work if the gallery is loaded in an iframe, and that iframe has a different origin? Or would the preconnect tag need to be added within the iframe?)

Answer 1

It seems like Chrome does not pre-connect when the link[rel=preconnect] is dynamically added to the DOM instead of being there in the initial HTML returned from the server. You can test this by:

1. After the link[rel=preconnect] element is inserted into the HTML, perform another HTTP request to the same domain. Open the Network panel in Chrome devtools, and you can see the details of the connection/request from the Timing tab. If pre-connect was done successfully then the second request should not contain DNS Lookup, Initial connection or SSL durations. Otherwise, it would mean that the pre-connect had not been done as intended.
2. Use chrome://net-export/ and https://netlog-viewer.appspot.com/#import to see more details. Again, execute the same code while the logging is active, and if you can't see network jobs like HTTP_STREAM_JOB_CONTROLLER or SSL_CONNECT_JOB to the given domain, it's very likely that the browser is not pre-connecting.

Although, this behavior does not seem to be explicitly specced anywhere. https://html.spec.whatwg.org/multipage/links.html#link-type-preconnect

In fact, Safari emits a log saying Successfully preconnected to..., so it seems like it's more of a browser implementation matter.