Question

我对你有一点问题 - 但希望答案很简单：）

假设我有一个非常简单的页面链接和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）并获取＆lt; body＆gt;中的内容标记并将其放入main-content.innerHTML。

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

问题：

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

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

Answer 1

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

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

Answer 2

史蒂夫·索德斯（Steve Souders）在他的高性能网站博客上发表了一篇帖子Using Iframes Sparingly，可能会提供更多见解。

Answer 3

虽然浏览器自2009年以来有所改进，但浏览器需要点击其他服务器（假设iframe用于第三方内容），或者再次点击本地服务器（假设iframe用于本地内容），仍然会影响页面性能。通常，其他HTTP请求将始终对页面的性能产生影响。如果可以在加载页面之后构建iframe而不是呈现iframe的内容，这将改善初始页面加载。但是，我认为这会影响页面性能，而iframe会加载其他内容。

为什么iframe这么慢？

3 个答案: