只能在IE

的问题缓慢的Iframe JavaScript执行：只能在IE

我已经开发了Web应用程序。它通过iFrame的帮助嵌入到网站中。

如果我将应用程序作为独立运行（IE9）说：www.example.com/webapp它加载约十秒钟平坦（这是一个相当大的应用程序）。 Chrome和FF速度更快。

如果它嵌入在iFrame中，但是IE完全丢失它，javascript执行时间高达40-60秒直到应用程序完成加载。一旦应用程序加载，但没有问题，它运行完美。

回顾：独立：OK，在iFrame中：不好。

在web应用程序中加载了一些xml，特别是一个大约8mb的非常大的xml。 xml的解析和内容是使用KnockoutJS创建的。然而，这与不太相关，我将它缩小到了使用jQuery完成的XML解析。

独立解析在IE9中大约需要10秒。嵌入它大约40-60。我已经安慰了状态日志和时间戳，我可以在身体上看到JavaScript运行速度非常慢，嵌入式。 每次trace-out需要4-6倍的时间只要对应于增加的整体加载时间。

FireFox和Chrome是免疫的，并且不会显示减速或减速过慢而不显示。

我试过iFrame和对象嵌入。相同的结果。

问题

你知道为什么简单的JavaScript执行（XML解析时，XML是加载和存储），嵌入式的iframe比时将需要4-6倍的时间独立？

奖金信息

我不是在谈论页面加载这里。一切正常加载。即使是主机页面。这还不是另一个页面挂起，直到iframe准备就绪的问题。问题在于iframe内部的执行速度很慢。我试过嵌入在相同的域，外部域，内部，外部。到处都是同样的问只要我iframe该死的东西，负载性能下降。一旦它被加载，一切都很好，一切运行得很好。

PS：我希望我发现的关键字是关键字是可以的。这应该是一个帮助，而不是讨厌。我个人在关注大量文本时遇到问题。

性能监视器，而它的加载：

IE9 **

http://imgur.com/iYdMuPe

enter image description here

来源

2014-10-01 Eirinn

只是为了帮助缩小这里发生的事情，您是否可以在加载时监控CPU使用情况？（我试图弄清楚ie if实际上是否在iframe中运行得更慢，或者由于某种原因它正在做更多的工作） – 2014-10-01 11:45:44

当然可以！ http://imgur.com/iYdMuPe在这里，它也会链接到OP中。 – Eirinn 2014-10-01 12:16:45

这是一个面条划痕。当然，看起来电脑在通过iframe时不得不做更多的工作。在早期版本的IE浏览器（ie7等）中，有一个网络钓鱼过滤器，有些人抱怨说，当iframe出现时，它会吸食CPU。 ie9化身被称为智能屏幕过滤器。检查是否启用了该功能，如果是，请尝试禁用它。禁用指令：http://support.microsoft.com/kb/930168 – 2014-10-01 16:10:35

显然，IE在深度嵌套循环中通过jQuery获取xml节点的属性存在严重问题。将其更改为纯JS可将加载时间缩短至15秒左右。仍然不是很好，但更好，更好！

来源

2015-06-18 08:37:24 Eirinn

我发现，jQue设置元素大小ry .height（n）和.width（n）可能极其缓慢，您可以改为使用.css（“width”，x）和.css（“height”，x）。

来源

2014-10-09 12:49:38 ern0

首先，击中F-12并确认文档模式在两种情况下都是相同的。如果不是，请将外框的文档模式更改为匹配。

如果它们已经相同，则尝试改为在外部页面完成后动态加载iFrame脚本。老版本的IE处理资源分配奇怪，可能是问题的一部分。

授予，而不是您的问题的答案，但将8 MB的XML带到客户端是相当低效的。可以将这些中的任何一个剥离出来或完全处理服务器端？

最后，IE浏览器缓慢移动并添加DOM元素（与Chrome相比）。你最好的选择是一次添加它们。因此，如果您在解析XML时更新UI（而不是在解析后立即全部解析），则会显着降低您的速度。

来源

2014-10-09 17:02:37

感谢您参与。文档模式相同，iFrame在没有内容的情况下加载到空白页面上。我们不能使用服务器端处理，因为应用程序也被加载离线。问题是只在一个iFrame中，所以我怀疑UI加载顺序在这方面没有任何区别:) – Eirinn 2014-10-13 07:57:26

类似于@ ern0所说的，如果您在脚本中操纵高度和宽度，并且遇到缓慢，那么将jQuery的.height()和.width()方法更改为vanilla JS可以实现显着的性能改进。

吸气剂

这里是一个performance test读取元素的当前高度。它表明，香草JS属性offsetHeight是显着更快比.height(),.css("height")和.style.height技术。

区别非常显着，甚至不是竞争。

塞特斯

这里是设置元素的当前高度performance test。这表明，香草JS属性.style.height是显着 *比.height()和.css("height")方法更快。

再次，差异是如此重大，它甚至不是一个竞争。

摘要

的.style.height财产擅长于用一个令人难以置信的利润率都获取和设置，相比于jQuery方法。只读offsetHeight属性明显比用于获取的style.height属性快，但（因为它是只读的）不能用于设置高度。因此，只要更改代码即可使用.style.height，如果它仍能达到所需的效果，可能会更容易。

高度和宽度属性和方法应该几乎相同。如果你想为它们添加性能基准，那也没问题，但是你应该得到相同的结果，宽度属性和方法在与它们对应的高度对应物相同的位置完成。

来源

2014-10-09 17:43:23

回答

相关问题