使用JS的Internet Explorer 11性能

Question

我有一个由GWT制作的非常复杂的javascript,它在所有浏览器(包括IE10)中运行良好,但在IE11中我遇到了性能问题.

激活探查器我发现了最耗费代码的方式......(按照最消耗的顺序)

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

clientWidth 32秒(32806ms),仅用于60次呼叫offsetHeight为191次呼叫29秒

在我看来我的性能问题的原因在IE11中本地化(考虑到整个代码在IE10中的执行大约是2秒)而且除了自然我可以开始优化减少调用次数(如果可能的话)我想了解是否有我正在使用的方法有什么问题或其他任何人都知道在IE11中有什么问题？

更新:只是给出一个比较术语:clientWidth在文档模式中的相同代码中= 10它是15ms ...相差2000倍这么奇怪我找不到IE中的错误,相同的代码,相同的方法分析文档模式边缘(11)与10

更新:使用分析器更深入似乎clientWidth在我的树中挖掘更多时间:

我看到:clientWidth - > Layout - > html-> body - > table x - >生成父显示:table - > td - > table->生成的表显示:table - > td - > table ..... ..

等等很多时间(我无法到达树的尽头!

有没有人知道生成的表格用于显示:表格究竟是什么？我唯一可以猜到的是IE11由于某种原因继续在DOM树上运行越来越多来计算宽度......但我无法猜测如何打破这个长周期

更新与替代方法:有趣(并确认到目前为止看到的)它存在一种"解决"性能问题的方法:将最外部的div /容器设置为像素中的固定大小(至少两个维度中的一个)使IE更容易计算容器大小并解决每个问题.这是一个有趣的解决方案可能对某些情况有用,不幸的是在我的情况下我需要保持我的"100%"大小以适应不同的屏幕...所以不是一个可接受的解决方法

UPDATE有一个可能的字段限制:似乎涉及大量使用cellWidth和cellHeight,我的JS设置几乎每个div的单元格大小和实际大小百分比,删除单元格大小似乎将大小计算的时间减少到1ms每次通话!

Answer 1

我不能说我达到了完美的理解，但不知何故我解决了：

首先，使用像素表示的大小有所帮助，但实际和主要问题是我至少在 GWT cellHeight="150px" 的一个组件中进行设置，并且对于相同的元素 Height="100%" ，这在 JS 和生成的 html 中进行了转换一个对于 IE 来说尺寸令人困惑的表格，而其他浏览器却能够管理它。基本上整个问题是，如果有一些不完全线性的东西，大小的计算时间就会变得很长，而不会引发任何警告或错误！