为啥 iframe 这么慢？
Posted
技术标签:
【中文标题】为啥 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 有多慢 - 我们说的是毫秒，对吧？ 【参考方案1】：您几乎走在正确的轨道上。 iframe 会变慢，因为浏览器会有额外的开销（渲染它，维护它的实例和对它的引用）。
ajax 调用会更快一些，因为您获取数据然后注入它，或者用它做任何您想做的事情。 iframe 需要在浏览器内存中构建一个全新的“页面”，然后将其放入页面中。
【讨论】：
6 年后，这仍然是准确的评估吗？ @donohoe 是的，即使 7 年后情况依然如此 再过 3 年，我相信仍然适用。 一年还是一样 ...还有一个【参考方案2】：Steve Souders 在他的高性能网站博客上发布了 Using Iframes Sparingly 的帖子，可能会提供更多见解。
【讨论】：
【参考方案3】：尽管自 2009 年以来浏览器有所改进，但事实上浏览器需要访问其他服务器（假设 iframe 用于第三方内容）或再次访问本地服务器（假设 iframe 用于本地内容），这仍然会影响页面性能。一般来说，额外的 HTTP 请求总是会对页面的性能产生影响。如果可以在页面加载后构建 iframe 并渲染 iframe 的内容，这将改善初始页面加载。但是，我认为这会在 iframe 加载其他内容时影响页面性能。
【讨论】：
以上是关于为啥 iframe 这么慢？的主要内容，如果未能解决你的问题，请参考以下文章