为什么 iframe 这么慢？答案

【问题标题】：Why are iframes so slow?为什么 iframe 这么慢？
【发布时间】：2010-11-08 16:32:50
【问题描述】：

我有更长一点的问题要问你 - 但希望答案会很简单:)

假设我有一个非常简单的页面，带有链接和 iframe（仅用于简单示例）。

<body>
    <a href="test.html" target="mframe">open link></a>
    <iframe name="mframe" [params] />
</body>

因此，当您单击链接时，它将在框架中加载 test.html。

现在我将使用 div 和 ajax 调用更改 iframe。

<body>
    <a href="doAjaxCall('test.html')">open link</a>
    <div id="main-content"></div>
</body>

doAjaxCall 将简单地使用 GET ajax requset 来获取整个响应，解析它（使用 JavaScript）并抓取

标记中的内容并将其放入 main-content.innerHTML。

test.html 包含很多 html，还有 css 样式（但与父页面上的样式相同 - 所以我在使用 ajax 解决方案时不需要它们）。

问题：

为什么这个 ajax 解决方案这么快？我仍在下载相同数量的数据（下载整个 test.html）。

为什么 iframe 解决方案这么慢？是因为浏览器必须再次解析所有可能的样式吗？还是 iframe 的其他开销？

【问题讨论】：

您是否在多个浏览器中看到相同的行为？
其实我的例子很简单。 :) 实际上，我正在一个更大的站点上尝试此解决方案，我们现在正在使用 iframe。我已经删除了它们并用那个 ajax 解决方案替换它们。正如我所写，我只是用 ajax 调用替换了链接，但流量仍然相同。是的，在每个浏览器（IE/FF/CH/SAF）中它肯定更快。我现在看到的唯一原因是浏览器不需要一次又一次地加载样式，只需替换“main-content”div 的 innerHTML。谢谢！帕沃尔。
如果您的样式表位于通过链接标签调用的专用 css 文件中，那么浏览器应该利用缓存并且只加载一次。顺便说一句，我很好奇你的 iframe 有多慢 - 我们说的是毫秒，对吧？

标签： javascript html css ajax iframe

【解决方案1】：

您几乎走在正确的轨道上。 iframe 会变慢，因为浏览器会有额外的开销（渲染它，维护它的实例和对它的引用）。

ajax 调用会更快一些，因为您获取数据然后注入它，或者用它做任何您想做的事情。 iframe 需要在浏览器内存中构建一个全新的“页面”，然后将其放入页面中。

【讨论】：

6 年后，这仍然是准确的评估吗？
@donohoe 是的，即使 7 年后情况依然如此
再过 3 年，我相信仍然适用。
一年还是一样
...还有一个

【解决方案2】：

Steve Souders 在他的高性能网站博客上发布了 Using Iframes Sparingly 的帖子，可能会提供更多见解。

【讨论】：

【解决方案3】：

尽管自 2009 年以来浏览器有所改进，但事实上浏览器需要访问其他服务器（假设 iframe 用于第三方内容）或再次访问本地服务器（假设 iframe 用于本地内容），这仍然会影响页面性能。一般来说，额外的 HTTP 请求总是会对页面的性能产生影响。如果可以在页面加载后构建 iframe 并渲染 iframe 的内容，这将改善初始页面加载。但是，我认为这会在 iframe 加载其他内容时影响页面性能。

【讨论】：