优化完全相同的iframe的负载

Question

我需要显示几个完全相同的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的源代码，但是由于所有内容都被缩小了，因此并非易事。

Answer 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>