javascript - IE8 中的 clientWidth 性能

Question

我有一些遗留的 javascript 可以卡住表格的 tfoot/thead 并让主体滚动，它工作正常，除了在 IE8 中它非常慢。

我将问题追溯到读取 tfoot/thead 中单元格的 clientWidth 属性...在 ie6/7 和 FireFox 1.5-3 中读取 clientWidth 属性大约需要 3 毫秒...在 IE8 中需要超过 200 毫秒当表格中的单元格数量增加时，时间会更长。

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

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 快，但又恢复可用了。