使用主要 window 中的预连接资源提示来提高外部 iframe 中脚本的性能

Using preconnect resource hint from the main window to improve the performance of a script inside a foreign iframe

我的网站有一个 外国 iframe。这个外国 iframe 中有多个第三方脚本运行。

我知道如果我要 prefetch 来自主 window 的这些脚本 - iframe 将需要重新加载这些源(因为 prefetch 是在不同的域中完成的) .

如果我在主 window 中为第三方脚本添加 dns-prefetchpreconnect 资源提示,原因 可能是什么? , 在 iframe 中加载这些脚本的性能会提高吗?这仅仅是因为我预热了脚本吗?

出于保护隐私的原因,某些浏览器实施了 double-keyed HTTP Cache 以防止跟踪。这意味着如果 domain1 从 CDN 加载 jQuery,然后 domain2 从同一个域加载相同的 jQuery 资源,它将被再次下载,而不是重复使用来自 HTTP 缓存的相同副本。

Safari 已经这样做了一段时间 Chrome have recently stated they will do the same

这意味着您不能 prefetchpreload 外部域 iframe 中的资源和脚本,如您所述。

dns-prefetchpreconnect 没有此类隐私影响(目前 - 请参阅 for potential upcoming changes for preconnect). so they can be used to improve performance in iframes by front loading some of the work to get these scripts (though it should be noted that browsers may not always use the same connection depending on the browser,这可能会影响 preconnect 的使用)。

很可能连接池也将变成双键的 –https://github.com/whatwg/fetch/issues/917

在这种情况下 dns-prefetch 没问题,但是 iframe 中引用的资源的 preconnect 来自顶部框架原点的 preconnect 不会因为顶部框架原点将不同于 iframe 原点

iframe 的内容应该仍然能够进行自己的预连接——使用 link 元素或 HTTP header

(添加为新答案,因为评论不能有换行符)