jQuery

Как более оптимизированно ссылаться на dom элементы?

К примеру есть десятки динамически создаваемых div блоков, в которых часто будут меняться данные.
Данные могут быть совершенно разные, data атрибуты, текст внутри внутренних span и т.д.
Используется Jquery.

Что будет более рациональным, каждый раз использовать поиск элемента по id, классам или сохранять объекты в переменных через $("#selector") и потом ссылаться на них?

Казалось бы очевидно лучше хранить в переменных, но что в этом случае хранит переменная, ссылку на dom элемент или весь объект целиком? не забьётся ли память?

Какие варианты я вижу:
1
var some_div = $('#div_1');
var something_in_div = someDiv.find('selector');
2
каждый раз обращаться через $('#div_1'); и более подробные селекторы, по типу $('#div_1 selector')

P.S. хранится данные будут в переменных класса, для каждого блока есть свой экземпляр
HM
Hamo Mkhitaryan
563
В переменных JavaScript ВСЕГДА хранятся ссылки. И в подпрограммы передаются ссылки. Никаких "весь объект целиком" в языке не существует.

Да, эффективнее хранить ссылки. Но для десятков блоков ты заметной разницы в производительности не увидишь.
Жагу
Жагу
99 445
Лучший ответ
Переменная хранит ссыль на DOM объекты, поэтому можно через $() или document.getElementById(), или через делегирование $("#staticParent").on("click", ".dynamicElement", function() { });
Адиль Увалиев
Адиль Увалиев
93 396
Если ты переживаешь за оптимизацию, то зачем jQuery в принципе используешь?
DOM элементы в память не копируются. В переменной хранится ссылка.
Чтобы элементы каждый раз не искать, можно использовать document.getElementsByTagName() или document.getElementsByClassName() которые возвращают живую HTML коллекцию, раз уж они у тебя добавляются динамически.
Или следи за свойством children в отслеживаемом div.
>>Как более оптимизированно ссылаться на dom элементы?
Перестать экономить на спичках. Это всегда является глупым и контррациональным поведением.

>>...сохранять объекты в переменных через $("#selector") и потом ссылаться на них?
Jquery делает это автоматом (изучи в отладчике $.cache )

>> не забьётся ли память?
Для ответа на подобные вопросы используют тестирование приложений.
В отладчике браузера для этого сделана специальная вкладка которая строит кучи разнообразных отчетов рисует таймлайны, графики и диаграммы всех мыслимы показателей.
Поиск Все равно будет выполнятся, ведь сохраняется ссылка. А вот длина кода уменьшается, поэтому если мне нужно взаимодействовать с элементом более 1-2 раз я его сохраняю в переменную.

Похожие вопросы