iFrame - 在 Web 应用程序中实现 Iframe 的成本

iFrame - cost of implementing an Iframe in a web application

本文关键字：Iframe 实现 Web 应用程序 iFrame 更新时间：2023-09-26

首先，澄清一下，这个问题不是关于加载页面渲染性能。

我正在开发一个使用SVG和大量javascript的Web应用程序（HTML5，SVG，CSS3和Js）。它到了拖动明显缓慢的地步，我们不得不返回并重写并审查所有现有功能以优化应用程序。

我的一位队友认为，如果我在 iframe 中加载一个功能，Web 应用程序不会产生太大影响，因为浏览器会在单独的线程中处理它，因此现有的 Web 应用程序选项卡不必首当其冲地承受 iframe 内容渲染和更新。要添加，如果需要，iframe 中的内容可以轻松地在div 中呈现。

我的问题是，在处理iframe时，浏览器（当然是最新的和最大的）为了渲染和性能而分配单独的资源是真的吗？对于此问题，应用程序加载不是问题。

我讨厌在这里跳上旧线程，但接受的答案具有误导性。你的朋友是对的：iframe 是有效的沙盒化，因此它们的渲染过程在现代浏览器中是独立的、异步的和多线程的。因此，虽然将应用程序的某些部分分割到 iframe 中不会加速任何 JavaScript 的执行，但它很可能会提高渲染性能，因为它可以分割和简化每个页面组件的 DOM。

作为参考，请查看有关Fastbook的故事，Sencha工程师在几周内将其作为一个晚间项目汇总在一起，只是为了表明Facebook网络应用程序可以得到极大的优化。除此之外，他们还使用 iframe 进行沙盒渲染。

作为旁注，这并不是浏览器应该如何工作。（例如，Chrome团队鼓励人们在需要iframe来提高性能的情况下提交错误。尽管如此，在可预见的未来，对于复杂的应用程序，尤其是那些具有多个"面板"和高重排率的应用程序，这是最佳实践。

保证在同一线程中运行同一域<iframe>。

如果两个页面

无法相互交互，则浏览器只能在不同的线程上运行两个页面。