Селекторы и производительность

Question

Есть ли какая-то польза для производительности, когда я делаю следующее в Mootools (или в любом другом фреймворке)?

var elem = $('#elemId');    
elem.addClass('someClass');        
elem.set('some attribute', 'some value');

и т. Д., И т. Д. В основном, я много обновляю некоторые элементы в DOM, и мне было интересно, было ли лучше создать переменную в памяти и использовать ее при необходимости:

$('#elemId').addClass('someClass');    
$('#elemId').set('some attribute', 'some value');

Изменения $('#elemId') повсюду, в разных функциях.

Answer 1

Спенсер,

Это называется кешированием, и это одна из лучших практик.

когда вы говорите

$('#elemId');

Он будет каждый раз запрашивать DOM, поэтому, если вы скажете

var elem = $('#elemId');

elem действует как элемент кэша и значительно повышает производительность.

Это по-мужски полезно в IE, так как имеет проблему утечки памяти и все

готов этот документ, который действительно хорош

http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

Answer 2

Зависит от того, как вы запросите дом. Поиск по идентификатору очень быстро. Второе место по классам CSS. Так что, пока вы делаете это только одним идентификатором (а не сложным селектором, содержащим идентификатор), преимуществ не должно быть. Однако, если вы используете любой другой селектор, кэширование - это то, что вам нужно.

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

https://developer.mozilla.org/en/Writing_Efficient_CSS

Answer 3

Ваш первый подход быстрее, чем второй, потому что вы "кэшируете" результаты поиска на #elemId.

То есть вызовы addClass и set не требуют дополнительных поисков в DOM для вашего элемента.

Однако! Вы можете связать вызовы функций:

$('#elemId').addClass('someClass').set('some attribute', 'some value');

В зависимости от вашего приложения caching или linking могут работать лучше, но определенно не идентичные последовательные поиски в одном и том же блоке.

Answer 4

Вы рассматриваете возможность использования локальной переменной для кэширования значения потенциально медленного поиска.

Насколько медленным является сам вызов? Если это быстро, кэширование не будет иметь большого значенияразница.Если он медленный, то кешируем при первом звонке.Селекторы значительно различаются по своей стоимости - просто подумайте о том, как код должен штрафовать элемент.Если это идентификатор, то браузер обеспечивает быстрый доступ, тогда как классы и узлы требуют полного сканирования DOM.Проверьте профилирование селекторов jQuery (Sizzle) , чтобы понять их.

Можете ли вы объединить вызовы в цепочку? Рассмотрите возможность вызова методов "цепочки", где это возможно.Это обеспечивает эффективность без введения другой переменной.

Для вашего примера я бы написал:

$('#elemId').addClass('someClass').set('some attribute', 'some value');

Как код читает? Обычно, если используется тот же методбудет вызываться несколько раз, яснее высушить его и использовать локальную переменную.Затем читатель понимает намерение лучше - вы не заставляете их сканировать все вызовы jQuery, чтобы убедиться, что они одинаковы.Кстати, довольно стандартным соглашением является именование переменных jQuery, начинающихся с $ - что допустимо в Javascript - как в

var $elem = $('#elem');
$elem.addClass('someClass');        

Надеюсь, это поможет.

Answer 5

В зависимости от ситуации, кэширование может быть на 99% быстрее, чем при каждом использовании объекта jQuery. В случае, если вы представили, это не будет иметь большого значения. если вы планируете использовать селектор много раз, вам обязательно следует кэшировать объект как переменную, чтобы он не создавался при каждом его запуске.

На подобные вопросы ответили на Обеспечивает ли использование $ this вместо $ (this) повышение производительности? .

Проверка журнала производительности http://jsperf.com/jquery-this-vs-this