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

StackOverflow https://stackoverflow.com/questions/1402617

Вопрос

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

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

Но:

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

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

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

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

Основная проблема здесь заключается в том, что для столбца таблицы нет общего родительского элемента, поэтому для того, чтобы оформить столбец, нужно пройти по всей таблице, выбрать каждую строку, а затем найти нужную n-й-дочерний элемент тд.мой код 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", просто что-то более быстрое, чем "non responsive".

Тхнаки

Том.

Это было полезно?

Решение

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

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

Другие советы

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

<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, но поддержки браузера там пока нет.)

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top