#jquery #css #performance #browser
#jquery #css #Производительность #браузер
Вопрос:
У меня есть страница, на которой мне нужно динамически добавлять классы or css. На моей странице у меня есть следующий код Jquery,
myElementsList.addClass('AClass').removeClass('BClass')
Эти классы css изменят цвет и цвет фона моих элементов. Проблема в том, что для перерисовки браузера требуется 2 или 3 секунды.
Если я использую классы css, которые не существуют (или не перерисовывают браузер), то это произойдет очень быстро.
myElementsList.addClass('NotEXistClassA').removeClass('NotEXistClassB')
Любое предложение будет приветствоваться?
Редактировать:
Способ, которым я решаю эту проблему, сначала изменяя первые 20 строк и изменяя оставшиеся с помощью таймера. Я также сбрасываю этот таймер каждый раз, если события снова возникают до истечения таймера.
Любое другое предложение приветствуется.
Комментарии:
1. какой браузер? какая ОС? существуют ли флэш-или большие изображения, определенные этими классами CSS?
2. Таким образом, это означало бы, что медленным является не add / removeClass, а то, как вы перерисовываете браузер, верно?
3. @MarekSebera Как в IE, так и в FF. В моем примере нет ни Flash, ни какого-либо изображения. Просто таблица с 5000 строками
4. Можете ли вы привести какой-нибудь пример в jsfiddle. чистая или около того?
5. @jackJoe проблема не в скрипте, а в перерисовке браузера. ВНИМАТЕЛЬНО посмотрите на мой вопрос.
Ответ №1:
Проблема здесь в том, что вы пытаетесь заставить браузер выполнять две вещи одновременно, которые требуют, чтобы он перерисовывал одни и те же вещи.
Но на самом деле вы можете добиться того, чего хотите (изменить цвет строк), выполнив только одно из двух действий.
Основное изменение, которое вам нужно внести, — это не иметь стиль для «не выбран» и другой стиль для «выбранного», а вместо этого иметь один для «по умолчанию» и один для «выбранного».
Затем вы можете использовать стиль «по умолчанию» для установки стандартного цвета и просто добавить «выбранный» стиль, чтобы переопределить его; вам не нужно удалять стиль по умолчанию, так как выбранный переопределит его.
Вот простой фрагмент CSS, который поможет вам начать:
.grid tr {
background: #FFFFFF; /*default white background*/
}
.grid tr.selected {
background: #222222;
}
… и скрипт будет работать только тогда addClass('selected') , когда вы его выберете, и removeClass('selected') когда вы его отмените.
На самом деле not-selected класс вообще не нужен.
Это простое изменение удалит половину работы, которую выполняет ваша программа при переключении выделения, и на самом деле это, вполне возможно, ускорит его более чем на 50% из-за того, что ему не нужно выполнять несколько перерисовок одних и тех же элементов.
Это, безусловно, заставит вас работать немного быстрее. Это не вся история о том, почему ваша страница работает медленно, но это, безусловно, очень поможет.
Комментарии:
1. Спасибо, это значительно повышает скорость.
Ответ №2:
Сначала удалите класс, затем назначьте новый класс
myElementsList.removeClass('BClass').addClass('AClass');
Я думаю, это может вам помочь.
Комментарии:
1. Спасибо. Но это не помогает.