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

Question

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

Я проследил проблему с чтением свойства clientWidth ячейки в tfoot/thead ... в ie6/7 и FireFox 1.5-3, чтобы прочитать свойство clientWidth ... в IE8 он берет на себя 200 мс и дольше, когда количество ячеек в таблице увеличивается.

Это известная ошибка? есть ли какая-нибудь работа или решение?

Answer 1

Мне не удалось найти документальное подтверждение, что это известная ошибка. Чтобы повысить производительность, почему бы не кэшировать свойство 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 2

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

Ваш браузер может быть busy doing reflow на IE8, что делает клиентскую скорость медленнее?

Answer 3

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

Answer 4

Я решил эту проблему, если вас все еще интересует. Решение довольно сложно. В принципе, вам нужно прикрепить простой элемент к элементу и кешировать его 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"; 
} 

Обратите внимание, что я создал постоянные ширины/высоты. Вы должны использовать их для получения ширины/высоты ваших элементов:

var width = element[WIDTH]; 

Это сложно, но это работает. У меня была такая же проблема, как и вы, доступ к clientWidth был невероятно медленным. Это очень хорошо решает проблему. Это все еще не так быстро IE7, но он снова используется для использования.

Answer 5

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

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

Я установил его, установив событие изменения размера окна: resize = "return myfunction();" вместо просто изменить размер = "myfunction();" и убедитесь, что моя функция вернулась ложно;

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