Internet Explorer 11 JS性能表现

14

我有一个非常复杂的JavaScript代码是由GWT生成的,在所有浏览器(包括IE10)中都能很好地工作,但在IE11中我遇到了性能问题。

通过激活分析器,我发现最耗时的代码是...(按照最耗时的顺序)

clientWidth,offsetHeight以及类似的方法具有令人印象深刻的值:

clientWidth 32秒(32806ms)仅60次调用 offsetHeight 29秒,共181个调用

根据我的经验,我的性能问题在IE11中定位,(考虑到IE10中的执行时间大约为2秒),当然,除了自然情况下我可以开始优化减少调用次数(如果可能的话),我想知道是否有任何方法存在问题或其他东西。 有人知道IE11的问题吗?

更新: 只是给出一个比较的术语:在文档模式= 10中,相同代码中的clientWidth为15毫秒...这是2000倍的差异,我无法找到IE的错误,相同的代码,相同的方法在文档模式edge(11)与10进行了分析

更新: 通过分析器进行更深入的研究,看起来clientWidth在我的树内部挖掘了更多的时间:

我看到:clientWidth->布局-> html-> body-> table x->生成的父级用于显示:table-> td-> table->生成的用于显示:table的表格-> td-> table.......等等一大堆次数(我无法达到树的末端!)

有人知道“生成的用于显示:table”到底是什么意思吗?我唯一能猜测的是IE11由于某种原因继续在DOM树上运行以计算宽度...但我无法猜测如何打破这个长周期

更新了解决方法: 有趣的是(并确认迄今为止所看到的),存在一种“解决”性能问题的方法:将最外部的div /容器设置为像素固定大小(至少两个维度中的一个),这似乎更容易使IE计算容器大小并解决所有问题。

这是一个有趣的解决方法,对某些情况可能有用。但不幸的是,在我的情况下,我需要保持我的“100%”大小以适应不同的屏幕…因此不是可接受的解决方法。

更新具有可能的字段限制: 似乎涉及到大量使用cellWidth和cellHeight,我的JS为几乎每个div设置了单元格大小和实际大小作为百分比,删除单元格大小似乎将大小计算时间减少到每次调用1毫秒!


nop,使用javascript:window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'标准':'怪异') + ' 模式。') 进行检查,响应为标准模式...如预期。 - noone1
保持使用地址栏JS,IE说文档模式是11...仍然没有任何奇怪的地方。 - noone1
1
顺便提一下:强制使用开发工具作为文档模式=10可以解决性能问题...但这似乎不是一个很好的解决方案(而且我必须找到一种方法从页面定义中进行透明处理,以便对用户来说是透明的)。 - noone1
1
奇怪。也许你可以举一个导致问题的代码示例?如果不太复杂,请编辑问题并展示代码。 - davidkonrad
包含代码是一种问题,因为整个JS代码是从GWT项目生成的,很难隔离出一个示例和有意义的部分...我正在尝试生成一个具有相同问题的示例案例,但正如您所想象的那样,这也是一种困难,因为变量数量很多。 - noone1
显示剩余4条评论
1个回答

3
我不能说我完全理解了,但我设法解决了:
首先使用像素表示的尺寸有所帮助,但实际上,主要问题是我至少在一个GWT组件中设置了cellHeight="150px",而对于相同的元素,Height="100%"。这会导致JS和生成的HTML表格大小混乱,IE无法处理,而其他浏览器则可以。基本上,整个问题在于如果有任何不完全线性的东西,计算大小的时间就会变得非常长,而不会引发任何警告或错误!

6
这就是为什么像这样的东西存在。 -> https://image-store.slidesharecdn.com/4a0419d3-9de8-4158-a6d8-6a2b6ee9f044-original.jpeg :) - davidkonrad

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接