Изменение свойства 'className' в IE7 происходит очень медленно

Question

На моем веб-сайте я динамически изменяю свойство javascript 'className' в DIV. Однако это чрезвычайно дорогая операция, так как DIV содержит много дочерних узлов. Иногда это занимает до 1,5 сек.

Есть ли способ ускорить эту операцию? Например, скрыть содержимое, выполнить операцию, а затем снова показать содержимое?

Обновление:

Некоторая дополнительная информация.

Фактический код:

$("#myDiv").tabs();

Он находится в обработчике .ready (). Увидеть http://jqueryui.com/demos/tabs/

Это дорогой звонок. Я проследил его до свойства className , которое потребляет все это время обработки.

DIV содержит большой массив данных sharepoint, см. http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spview.renderashtml.aspx Код запускается на Sharepoint, протестирован на WinXP + IE7.

Поэтому мне интересно, можем ли мы отключить обновление макета при манипулировании DOM или что-то в этом роде. Есть какие-нибудь хитрости?

Answer 1

Постарайтесь убедиться, что CSS-селекторы, которые влияют на элементы, содержащиеся в контейнере, имя класса которого меняется, используют класс контейнера только тогда, когда это действительно необходимо. Очевидно, что когда вы создаете макет с помощью класса контейнера, это, вероятно, влияет на многие вещи, но иногда легко добавить div.whatever td.currency, когда на самом деле все, что вам нужно, это td.currency (просто выдуманный пример).

Механизм компоновки IE действительно быстр для некоторых вещей, но я обнаружил, что интенсивное использование такого рода техники верстки (что, я считаю, очень хорошая практика в целом) может сильно обременять браузер. К счастью, IE8 намного лучше в таких вещах.

Answer 2

Я добился улучшения производительности на ~ 50% при переключении вкладок, удалив две вкладки для переключения с родительского элемента перед изменением свойства className. Подробнее о реализации см. https://developers.google.com/speed/articles/javascript-dom