Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Быстродействие JQuery (selector).each() / 10 сообщений из 10, страница 1 из 1
24.05.2016, 16:51
    #39242526
com.ета
com.ета
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
Добрый вечер всем. Подскажите по такому вопросу: как ускорить работу с таблицей? На клиентской стороне формируется таблица размером около 2 000 строк. Далее выборочно отмечаются значения с помощью checkbox в графах и функция each (для каждого чекбокса если он выбран (обращение к DOM элементу через $(this)) делай ....) выполняет редактирование выбранных полей. Но это неимоверно долго. Можно как то ускорить?
Слышал про quickEach, в нем вроде как быстрей. Что это и где брать? Может есть другие идеи?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.05.2016, 17:48
    #39242592
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
есть идея посмотреть на код, а не на рассказы о нем.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.05.2016, 19:14
    #39242670
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
com.етаНа клиентской стороне формируется таблица размером около 2 000 строк.Это небольшая таблица. У меня 5-12 тыс. записей и пока без тормозов   Как правильно заметил Antonariy , надо показать код.

з.ы. На сервере формирую таблицу вида
Код: html
1.
2.
<tr> <td>данные 1
<tr> <td>данные 2

без закрывающих тегов <tr> и <td> . Это разрешено стандартом и хорошо уменьшается HTML, который идет клиенту.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.05.2016, 11:41
    #39243031
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
com.ета,

Вообще-то надо смотреть что за страница, но скорее всего тормозит рендеринг.

Одно дело, только открыть большую таблицу.
Другое дело, в динамике менять большой объём HTML-содержимого.
Третье дело, не только менять содержимое, но и часто перечитывать при этом текущие размеры (стили) - это наибольшие тормоза при отображении и отзывчивости страницы
(перечитывание стилей может происходить неявно, в используемых сторонних библиотеках, тут вы только можете почитать документацию и посмотреть их код).

Попробуйте во время изменений содержимого скрывать всю таблицу (например у родительского блока менять стиль display:none/block)
Если не поможет или всплывут другие проблемы, попробуйте visibility:visible/hidden
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.05.2016, 20:39
    #39243479
com.ета
com.ета
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
user89,
Вот смотрите как дело обстоит. У меня есть перечень с checkbox и над ним есть так скажем главный checkbox
Например в таблице в 1000 записей в каждой строке есть checkbox, который может быть отмечен или нет. Если отмечен, то мне надо сделать действие, а именно поменять текст в ячейках и цвет. Для этого на основной checkbox поставил скрипт, выполняющий следующее:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
function general_check()
{
   if ($("input[name='general_checkbox']").prop('checked'))
   {
       $("input[name='all_checkbox']").each(function() {if($(this).prop("checked") == false) {$(this).prop("checked", true); change_func($(this), 'select')}});
   }
   else
   {
       $("input[name='all_checkbox']").each(function() {if($(this).prop("checked") == true) {$(this).prop("checked", false); change_func($(this), 'unselect')}});
   }
}



Собственно как-то так...
change_func как раз и занимается редактированием элементов через входные параметры обращаясь к ячейкам строки. Ячейки имеют id равное параметру id элемента $(this) + порядковый номер с нуля
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.05.2016, 21:22
    #39243497
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
налицо классическое применение JQuery без применения головного мозга.

нафига простое this.checked = true; оборачивать длинной соплей из внутрижквериевских вызовов? да еще по три раза на каждую итерацию each.
даже так будет выигрыш:

var $th = $(this)

if($th.prop("checked")
$th.prop("checked",true)
change_func($th

кстати, что за prop, когда всю жизнь было attr?

я понимаю, если бы с чекбоксом проделывали пяток операций, гоняя его по dom, но тут всего одна - проверка checked.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.05.2016, 22:01
    #39243521
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
com.ета,
когда чекбокс выбран, присвой строке класс(любой), потом можно этому классу сделать дисплей none, и у тебя будут только выбранные строки
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.05.2016, 22:32
    #39243535
com.ета
com.ета
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
Antonariy,
как вы посоветовали я уже делал, особого прироста это не дало. На пару секунд стало быстрее, но итог один.
Согласен с Вами, что оптимальней делать как Вы написали, я уже это поправил, но это к сожалению общей картины не меняет. При обработке 2 000 записей виснет браузер секунд на 15. Это не приемлемо.
Есть вариант что я некорректно заношу новые строки в таблицу и вследствие этого идет их некорректная обработка...
Функция change_func связана с удалением и добавлением div и tr элементов. Может быть косяк кроется там....
Завтра погляжу код, сейчас на память не помню уже
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.05.2016, 22:42
    #39243541
com.ета
com.ета
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
Antonariy, забыл про .prop написать Вам:

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.05.2016, 09:36
    #39243668
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Быстродействие JQuery (selector).each()
читать про вставку
https://learn.javascript.ru/modifying-document
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Быстродействие JQuery (selector).each() / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]