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



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

我知道如果我从主窗口prefetch这些脚本 - iframe 将需要重新加载这些源(因为prefetch是在不同的域中完成的(。

如果我在主窗口中为第三方脚本添加dns-prefetchpreconnect资源提示,在 iframe 中加载这些脚本的性能会得到改善,原因是什么?这仅仅是因为我预热剧本吗?

某些浏览器出于隐私原因实现了双键 HTTP 缓存,以防止跟踪。这意味着,如果domain1从CDN加载jQuery,然后domain2从同一域加载相同的jQuery资源,它将再次下载,而不是从HTTP缓存中重用相同的副本。

Safari已经这样做了一段时间,Chrome最近表示他们也会这样做。

这意味着您无法按照声明在外部域 iframe 中prefetchpreload资源和脚本。

dns-prefetchpreconnect没有这样的隐私影响(目前 - 请参阅下面的Andy的回答,了解预连接即将发生的潜在更改(。 因此,它们可以通过预先加载一些工作来获取这些脚本来提高 iframe 的性能(尽管应该注意的是,浏览器可能并不总是使用相同的连接

,具体取决于浏览器,这可能会影响preconnect的使用(。

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

在这种情况下,dns-prefetch是可以的,但 iframe 中引用的资源的顶部帧原点的preconnect不会,因为顶部帧原点将与 iframe 原点不同

不过,iframe 的内容仍然应该能够建立自己的预连接——使用 link 元素或 HTTP 标头

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

最新更新