保留对 iframe 的引用并将其插入回 DOM，无需回流，在 iframe 内重新绘制

Question

我有一个网站，可以在 iframe 中加载一些子域。它可以是 5 个或 10 个或任何更多数量的 iframe。用户可以选择在这些 iframe 之间进行切换。在任何时候，屏幕上只会显示 1 个 iframe。

现在，为了避免在来回切换 2 个 iframe 时重新加载每个 iframe，我尝试将它们保留在 dom 本身中，并根据当前选择的内容隐藏或显示。但事实证明，随着用户打开越来越多的 iframe，这会增加 DOM 大小，成本高昂。

作为解决方案，我尝试维护对 iframe 的引用，并使用removeChild 将其从父级中删除。当用户切换回它时，我将使用存储的引用将 iframe 附加到其父容器。

但这会导致 iframe 重新加载/刷新。感觉就像是重新加载其内容，而不是渲染从 DOM 中删除之前已经存在的内容。

这是预期的吗？有没有一种方法可以优化此方法，使添加回来的 iframe 不会经过完整的网络请求、获取和渲染？

谢谢！

Answer 1

简短的回答是，当您添加 iframe 时，您将打开一个新网页，它实际上与打开一个新选项卡相同。您能做的最好的事情就是使用

display: hidden

不显示您不感兴趣的脚本。这至少应该暂停它们在其中运行的任何脚本。

更长的答案是，如果您准备投入一些精力，那么我建议考虑使用 ServiceWorker 在浏览器中构建代理服务器。

我在 GitHub 上找到了以下项目，它可能会有所帮助，如果您搜索

service worker proxy

，Google 会列出一些文章。