IE8中的clientWidth性能

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屬性並定期更新緩存？ IE，如果您編碼是：

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上進行重排，從而使客戶端寬度變慢？

Answer 4

IE 8能夠在IE版本之間切換，並且還具有兼容模式。 您是否嘗試過切換到兼容模式？ 這有什么不同嗎？

Answer 5

我雖然在讀取寬度屬性時也發現了性能緩慢。 而且可能很好。

但是，我發現在我們的應用程序中對性能的主要影響是附加到窗口上的resize事件的函數本身以某種方式導致另一個調整大小，這導致了級聯效果，盡管不是無限循環。 我意識到這一點，當我看到IE8中函數的調用次數比IE7大幾個數量級時（喜歡IE Developer Tool）。 我認為原因是元素上的一些活動，比如設置元素寬度，現在會導致IE8中的重排，但在IE7中沒有這樣做。

我通過將窗口的resize事件設置為：resize =“return myfunction（）;”來修復它。 而不只是resize =“myfunction（）;” 並確保myfunction返回false;

我意識到最初的問題是幾個月了，但我想我會發布我的發現以防其他人可以受益。