javascript – IE8中的clientWidth性能

前端之家收集整理的这篇文章主要介绍了javascript – IE8中的clientWidth性能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些遗留的 javascript,冻结表的tfoot / thead并让身体滚动,它工作正常,除了在IE8中它非常慢.

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

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

解决方法

如果你还有兴趣,我已经解决了这个问题.解决方案非常复杂.基本上,您需要将一个简单的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那么快,但它又恢复了可用性.

猜你在找的JavaScript相关文章