javascript - 优化完全相同的 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 文件下载完成时，另一个(甚至还没有启动的连接!)没有使用缓存，而是重新下载它。每个文件都一样。

我尝试了什么？

• 发送缓存 header 。目前使用 cache-control: public, max-age=31536000 回复，但我什至尝试过更严格的限制，例如 Cache-Control: immutable

  <

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

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

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

我能想到的绝望(也是唯一的？)解决方案:

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

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

Answer 1

您可以尝试加载没有 # 的 iframe 吗？如果缓存问题依赖于 anchor ，您可以在加载 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>