Question

我有一些遗留的javascript冻结了桌子的tfoot / thead并让身体滚动，它工作正常，除了在IE8中它非常慢。

我追踪问题是读取tfoot / thead中单元格的clientWidth属性...在ie6 / 7和FireFox 1.5-3中需要大约3ms来读取clientWidth属性...在IE8中需要超过200ms当表格中的单元格数量增加时更长。

这是一个已知的错误吗？有什么工作或解决方案吗？

Answer 1

如果您仍然感兴趣，我已经解决了这个问题。解决方案非常复杂。基本上，您需要将一个简单的HTC附加到元素并缓存其clientWidth / Height。

简单的HTC看起来像这样：

<component lightweight="true">
<script>
window.clientWidth2[uniqueID]=clientWidth;
window.clientHeight2[uniqueID]=clientHeight;
</script>
</component>

您需要使用CSS附加HTC：

.my-table td {behavior: url(simple.htc);}

请记住，您只需附加IE8的行为！

然后使用一些JavaScript为缓存的值创建getter：

var WIDTH = "clientWidth",
    HEIGHT = "clientHeight";

if (8 == document.documentMode) {

  window.clientWidth2 = {};
  Object.defineProperty(Element.prototype, "clientWidth2", {
    get: function() {
      return window.clientWidth2[this.uniqueID] || this.clientWidth;
    }
  });

  window.clientHeight2 = {};
  Object.defineProperty(Element.prototype, "clientHeight2", {
    get: function() {
      return window.clientHeight2[this.uniqueID] || this.clientHeight;
    }
  });

  WIDTH = "clientWidth2";
  HEIGHT = "clientHeight2";
}

请注意，我创建了常量WIDTH / HEIGHT。您应该使用它们来获取元素的宽度/高度：

var width = element[WIDTH];

这很复杂但有效。我遇到了和你一样的问题，访问clientWidth非常慢。这很好地解决了这个问题。它仍然没有IE7那么快，但它又恢复了可用性。

Answer 2

我无法找到任何已知错误的文档。要提高性能，为什么不缓存clientWidth属性并定期更新缓存？ I.E如果你的代码是：

var someValue = someElement.clientWidth + somethingElse;

将其更改为：

// Note the following 3 lines use prototype
// To do this without prototype, create the function,
// create a closure out of it, and have the function
// repeatedly call itself using setTimeout() with a timeout of 1000
// milliseconds (or more/less depending on performance you need)
var updateCache = function() {
   this. clientWidthCache = $('someElement').clientWidth;
};
new PeriodicalExecuter(updateCache.bind(this),1);

var someValue = this.clientWidthCache + somethingElse

Answer 3

您的问题可能与其他内容有关（而不仅仅是客户端宽度调用）：您在调用此函数时是否更新/调整DOM中的任何内容？

您的浏览器在IE8上可能是busy doing reflow，从而使客户端宽度变慢？

Answer 4

IE 8能够在IE版本之间切换，并且还有兼容模式。您是否尝试过切换到兼容模式？这有什么不同吗？

Answer 5

我虽然在阅读宽度属性时也发现了性能缓慢。而且可能很好。

然而，我发现在我们的应用程序中对性能的主要影响是附加到窗口上的resize事件的函数本身以某种方式导致另一个调整大小，这导致级联效果，尽管不是无限循环。我意识到这一点，当我看到IE8中函数的调用次数比IE7大几个数量级时（喜欢IE Developer Tool）。我认为原因是元素上的一些活动，比如设置元素宽度，现在会导致IE8中的重排，但在IE7中没有这样做。

我通过将窗口的resize事件设置为：resize =“return myfunction（）;”来修复它。而不只是resize =“myfunction（）;”并确保myfunction返回false;

我意识到最初的问题已有几个月了，但我想我会发布我的调查结果以防其他人受益。

IE8中的clientWidth性能

5 个答案: