触发动作后用JS动态添加rel=preconnect的<link>是否有效？

场景 #

用户可点击按钮打开图片画廊，图片托管在其他域名。绝大多数用户不会打开画廊，但当用户执行特定「触发动作」后，几秒内打开画廊的概率大幅提升。因此希望仅在用户执行触发动作时，预连接图片托管域名。

核心问题 #

以下代码是否能按预期工作？

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

我已在Chrome中测试，但不确定如何验证其是否正常工作——执行上述代码时未看到任何网络活动。我曾考虑加载该域名下的一张小型「占位图」来实现预连接，但好奇根据规范，上述代码是否本应生效。

额外问题 #

若画廊加载在不同源的iframe中，该代码是否有效？还是需要在iframe内部添加preconnect标签？

回答 #

核心问题解答 #

这段代码符合规范，理论上是生效的。浏览器不会在常规Network面板中显示preconnect的网络请求，但它确实会在后台完成与目标域名的TCP连接（HTTPS场景下还会完成TLS握手）。

你看不到网络活动的原因主要有两点：

• Preconnect属于浏览器后台优化操作，不会在Network面板中显示为独立请求。你可以在Chrome的chrome://net-internals/#events页面筛选preconnect事件，查看连接是否成功建立。
• 如果浏览器已经持有该域名的活跃连接，会直接复用现有连接，不会触发新的preconnect流程。

用加载占位图的方式确实能实现资源预加载，但preconnect更轻量——它仅建立连接，不加载任何资源，完全匹配你这种仅需提前准备连接的场景。

额外问题解答 #

如果画廊加载在不同源的iframe中，主页面的预连接不会对iframe生效。因为跨源iframe拥有独立的浏览器上下文，主页面建立的预连接无法被跨源iframe共享。这种情况下，必须在iframe内部的文档中添加<link rel="preconnect">标签，或者执行对应的JS代码来实现预连接。

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