Перерисовка браузера происходит очень медленно при использовании jquery addClass и removeClass

Question

У меня есть страница, где мне нужно динамически добавлять классы или CSS.У меня есть следующий код Jquery на моей странице:

myElementsList.addClass('AClass').removeClass('BClass')

Эти классы CSS меняют цвет и цвет фона моих элементов.Проблема в том, что для перерисовки браузера требуется 2 или 3 секунды.

Если я использую классы CSS, которые не eXist (или не перерисовывают браузер), то он будет выполняться очень быстро.

myElementsList.addClass('NotEXistClassA').removeClass('NotEXistClassB')

Любое предложение будет приветствоваться?

Редактировать :

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

Любые другие предложения приветствуются.

Answer 1

Проблема здесь в том, что вы пытаетесь заставить браузер делать две вещи одновременно, которые требуют перерисовки одних и тех же вещей.

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

Основное изменение, которое вам нужно сделать, это не иметь стиль для "не выбранных" и другой стиль для "выбранных", а вместо этого иметь один для "по умолчанию" и один для "выбранных".

Тогда вы можете использовать стиль «по умолчанию», чтобы установить стандартный цвет, и просто добавить «выбранный» стиль, чтобы переопределить его; Вам не нужно удалять стиль по умолчанию, так как выбранный будет переопределять его.

Вот простой кусочек CSS для начала:

.grid tr {
    background: #FFFFFF;  /*default white background*/
}

.grid tr.selected {
    background: #222222;
}

... и сценарий просто сделает addClass('selected') при его выборе и removeClass('selected') при отмене выбора.

Действительно, класс not-selected вообще не нужен.

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

Это, безусловно, заставит вас двигаться немного быстрее. Не вся история о том, почему ваша страница медленная, но это, безусловно, очень поможет.

Answer 2

Сначала удалите класс, затем назначьте новый класс

myElementsList.removeClass('BClass').addClass('AClass');

Я думаю, это может вам помочь.