javascript - 为什么 iframe 这么慢?

标签 javascript html css ajax iframe

我有一个稍微长一点的问题要问你 - 但希望答案会非常简单 :)

假设我有一个带有链接和 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 请求来获取整个响应、解析它(使用 JavaScript)并获取 标记中的内容并将其放入 main-content.innerHTML。

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

问题:

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

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

最佳答案

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

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

关于javascript - 为什么 iframe 这么慢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1092071/

相关文章:

html - 如何将前两个表隐藏在一个div中

html - 减少 Bootstrap 的列间距

javascript - 类型检查和扩展运算符 (setState)

javascript - ionic 框架 ionicView.entered 事件触发了两次

javascript - JQuery addClass 以一种非常奇怪的方式工作

javascript - AJAX getElementsByClassName 获取元素

javascript - 如何强制对特定 HTML 元素进行 knockout 更新?

javascript - Jquery event.preventDefault() 不工作

html - 如何在 Bootstrap 中制作两个等高的列?

javascript - 如何简化这个基于 jQuery 标题的警报代码?