优化完全相同的 iframe 的加载

Posted 2023-02-22

【中文标题】优化完全相同的 iframe 的加载

【英文标题】：Optimize load of exactly identical iframes

【发布时间】：2019-12-30 19:42:06

【问题描述】：

我需要显示几个完全相同的 iframe。此 iframe 具有从 URI 的 # 读取的 javascript，然后执行不同的请求，但 iframe 的源代码和获取的资源完全相同。

1 个 iframe，包括 javascript、样式表和图像，大小约为 10 mb。现在想象一下，我需要在同一页面上显示多达 10 个 iframe。这是一个高达 100 mb 的页面！

问题在于 iframe 本身或它们正在加载的内容都没有被直接缓存。 （至少不在 Google Chrome 上，这是我的主要目标）。

这是我的代码的示例：

<iframe src="myiframe#1">
<iframe src="myiframe#2">
<iframe src="myiframe#3">
...

每个 iframe 都在加载同一个巨大的 javascript 文件，并且为尽可能多的 iframe 触发相同的请求：

我们可以清楚地看到，当第一个 js 文件下载完成时，另一个（甚至是尚未启动的连接！）并没有使用缓存，而是重新下载。每个文件都一样。

我尝试了什么？

发送缓存标头。目前回复cache-control: public, max-age=31536000，但我什至尝试过更严格的Cache-Control: immutable

首先仅加载一个 iframe，然后在 onload 加载所有其他 iframe。即使第一个 iframe 已完全加载并且应该已将资源保存在缓存中，它仍然不使用缓存！

克隆 iframe，但正如 RFC 所述，它会完全重新加载 iframe，从而再次触发请求。

然而，在我的页面第二次加载时，浏览器确实会获取缓存中的资源，但这对我来说还不够。

我能想到的绝望（也是唯一？）解决方案：

加载所有资源和 iframe 源代码，然后动态创建 iframe 元素并将所有内容注入其中。这将是可能的，但非常困难。此外，可能对性能不太友好。

注意：iframe 不在我的域中，但我正在做一些反向代理，所以我可以控制 iframe。这意味着我可以修改 iframe 的源代码，但由于一切都被缩小了，这并不是一件容易的事。

【问题讨论】：

如果第二个页面命中从缓存中加载 iframe，您能否拥有一个只有 1 个 iframe 的登录页面（称为初始化页面），并且一旦 iframe 完成加载更改位置到您具有 3 个 iframe 的页面会立即从缓存中加载？

@JonathanLarouche 看看我尝试过的第二点。虽然它可能会在某些浏览器上起到作用，但它并不能完全发挥作用并且非常不稳定：/

它们 100% 必须是 iframe 吗？带有 iframe 内容的 div 可以工作吗？

只要每个 iframe 的 src 不同，浏览器就会认为它们是不同的。 （类似的技巧用于防止浏览器重用缓存数据）。不确定是否有办法，但您可以尝试将 # 值存储在其他地方，并稍后将其传递给 iframe。

你试过链接预取吗？ developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQIdk 如果它在 iframe 的上下文中做任何事情，因为 chrome 现在完全隔离了。

【参考方案1】：

您可以尝试在没有 # 的情况下加载 iframe 吗？如果缓存问题依赖于锚点，可以在 iframe 加载后设置：

<iframe src="myiframe" onload="this.src+='#1'"></iframe>
<iframe src="myiframe" onload="this.src+='#2'"></iframe>
<iframe src="myiframe" onload="this.src+='#3'"></iframe>