多个 iframe 的性能

Question

我正在处理一个需要相关网站预览的项目。我们一直在尝试一些想法，其中两个想法是使用服务来呈现网站并发回屏幕截图，或者获取网站并将其加载到 iframe 中作为“实时预览”。

团队确信 iframe 是更好的选择，因为它们是交互式的，并且允许预览动态视觉效果，但我有一些性能问题。

只是想知道是否有人可以在这里提供一些见解，而无需编写服务器来获取网站内容并将其转发到网站。设计将有大约 5 个图像/iframe，相对较小~300x500 像素。加载 5 个 iframe 是否类似于在 5 个选项卡中打开这些网站？

Answer 1

要回答您的问题，是的，这类似于在 5 个选项卡中打开这些网站。iFrames 在内存中构建一个全新的页面，然后将其添加到页面中。

除此之外，iFrame 存在巨大的安全问题，因为您毫无疑问地接受了提供者代码。在进行一些解析后，最好使用 ajax 并将代码注入到自己的 DOM 中，但我意识到有时选项是有限的。

查看此处提供的性能规格。

我认为上述文章的重要部分是：

Iframe 阻止加载

尽快触发窗口的 onload 事件很重要。这会导致浏览器的繁忙指示器停止，让用户知道页面已完成加载。当 onload 事件延迟时，会给用户一种页面变慢的感觉。

窗口的 onload 事件直到其所有 iframe 以及这些 iframe 中的所有资源都完全加载后才会触发。在 Safari 和 Chrome 中，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞行为。