Проблемы производительности IE6 при добавлении className на несколько элементов (плагин jQuery tableHover)

Question

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

Я разрабатываю все JS для этого проекта, используя jQuery 1.3.x, и нашел плагин tableHover , который делает именно то, что мне нужно.

Но:

в IE6 производительность этого плагина падает по мере того, как количество элементов ячейки возрастает до точки, когда страница почти не отвечает.

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

После отладки кода теперь я знаю, что выбор большого количества элементов плюс применение className ( jQuery.addClass () ) в IE6 выполняется очень медленно.

Я пытался использовать jQuery.css () вместо этого только с background-color , производительность улучшается, но опять же, когда число ячеек таблицы возрастает, производительность падает до в непригодном для использования состоянии, и во всех других браузерах производительность jQuery.css () намного ниже, чем jQuery.addClass () .

Основная проблема здесь заключается в том, что нет общего родителя столбца таблицы, поэтому для того, чтобы оформить столбец, необходимо пройти по всей таблице, выбрать каждую строку и затем найти правильный nth-child тд . мой код jQuery для этого выглядит так:

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

Я не буду вставлять сюда весь свой код, потому что он не имеет отношения к проблеме. Единственный ответ, который я ищу: есть ли известный способ сделать то, что мне нужно, с лучшей производительностью? Я не ищу быстродействия Chrome, просто что-то быстрее, чем «не реагирует».

Thnaks

Том.

Answer 1

Сократите количество изменений className и последующих перекомпоновок, позволив движку соответствия CSS браузера сделать всю работу за вас. Например, для таблицы 3х3:

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

Теперь все, что вам нужно сделать, это установить className на внешней таблице в «sel-row- (num) sel-col- (num)», и все ячейки обновятся одновременно, что будет намного быстрее, чем цикл и настройка классов.

Для очень большого числа столбцов / строк объем данных в таблице стилей может быть громоздким. Вы можете немного обойти это, динамически изменяя правила в таблице стилей через список document.styleSheets, но это требует некоторой кросс-браузерной работы, с которой jQuery вам не поможет. Или для таблицы, скажем, с множеством строк, но с небольшим количеством столбцов, вы можете поместить класс выбранной строки непосредственно в строку и сделать только подсветку столбца таким образом, что по-прежнему составляет всего 2-3 изменения класса.

(Было бы неплохо, если бы мы могли использовать селектор CSS3 nth-child, как вы это делали в селекторе jQuery, но поддержки браузера пока нет.)

Answer 2

Я имел дело с производительными сложными jquery для очень больших таблиц в IE6 . Вот что я могу предложить вам в плане помощи:

• кодирует как можно больше данных в html. например, кодировать номер строки и номера столбца в классе TD или атрибуте имени
• добавить прослушиватель мыши для всей таблицы , а затем использовать event.target для получения TDs
• разобрать местоположение ячейки, на которой вы наводите курсор, точка # 1
• опять же, вам, вероятно, придется добавить тонну классов, но есть класс для каждого столбца и каждой строки, чтобы вы могли выбрать как всю строку, так и весь столбец с помощью 2 селекторов классов и добавить к ним css
• кэшируйте как можно больше . если пользователь перемещается из одной ячейки в другую, проверьте, выделена ли она в строке. я думаю, что это в значительной степени гарантировано, так что у вас будет 1/2 операции выбора
• кэшировать целые столбцы, которые вы выбрали, поэтому вам не нужно выбирать дважды, то же самое для строк
• проверить эту отзывчивость плагин я написал, вы можете использовать его.
• также есть еще один пост, который я написал на тему написания быстрых плагинов jquery.

Answer 3

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

Я фактически начал с colgroup , я даже использую его для ширины столбцов в той же таблице, но элементы colgroup и col визуально устанавливаются за элементы таблицы, так что если tbody , tr , td или любой другой элемент в таблице имеет фон (который в моем случае есть у многих из них), colgroup не будет отображаться над этими элементами, и он не реагировал на позиционирование или любые другие сложные CSS-манипуляции, которые я пытался применить к нему.

Answer 4

Интересно, в поисках лучшей реакции от jQuery вы не видите лес за деревьями?

Почему бы вам не включить элемент <colgroup> в верхней части таблицы (явно или, если необходимо, динамически добавив его с помощью jQuery), а затем назначить значение цвета фона для столбца, соответствующего индексу выбранной ячейки

IE6 поддерживает элемент <colgroup>, но только в ограниченных свойствах. Однако фоновый цвет является одним из поддерживаемых, поэтому это должно значительно улучшить вашу производительность.