Производительность clientWidth в IE8

Question

У меня есть какой-то устаревший javascript, который замораживает tfoot / thead таблицы и позволяет прокручивать тело, он работает хорошо, за исключением того, что в IE8 он очень медленный.

Я проследил проблему до чтения свойства clientWidth ячейки в tfoot / thead ... в 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>

Вам необходимо подключить HTC с помощью CSS:

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

Помните, что вам нужно только прикрепить поведение для IE8!

Затем вы используете JavaScript для создания методов получения для кэшированных значений:

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 и периодически обновлять кеш? И.Е. если код был:

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

Я, хотя и заметил медленную производительность при чтении свойств ширины. И вполне может быть.

Однако я обнаружил, что основное влияние на производительность в нашем приложении было то, что функция, которая была присоединена к событию изменения размера окна, сама как-то вызывала другое изменение размера, которое вызывало каскадный эффект, но не бесконечный цикл. Я понял это, когда увидел, что количество вызовов для функции в IE8 на порядки больше, чем в IE7 (очень нравится IE Developer Tool). Я думаю, причина в том, что некоторые действия над элементами, например, установка ширины элементов, теперь вызывают перекомпоновку в IE8, чего не было в IE7.

Я исправил это, установив событие resize окна в: resize = "return myfunction ();" вместо просто resize = "myfunction ();" и убедившись, что myfunction вернул false;

Я понимаю, что первоначальному вопросу уже несколько месяцев, но я решил опубликовать свои выводы на тот случай, если кто-то другой может получить пользу.

Answer 4

IE 8 имеет возможность переключения между версиями IE, а также есть режим совместимости. Вы пробовали перейти в режим совместимости? Имеет ли это какое-то значение?

Answer 5

Ваша проблема может быть связана с чем-то другим (и не только с вызовом клиентской пропускной способности): происходит ли обновление или изменение размера в вашем DOM при вызове этой функции?

Ваш браузер может быть занят выполнением перекомпоновки в IE8, что замедляет работу клиента?