Могу ли я сохранить накладные расходы, не вызывая jQuery каждый раз, когда мне нужно получить доступ к элементу?

Скажем, у меня есть этот блок кода:

$('#myBox').css('background', 'grey');
$('#myBox').click( function(e){ console.log( 'Box clicked' ); });
$('#myBox').html(' Just a test text ');

То, что я знаю до сих пор, заключается в том, что я ищу элемент с идентификатором myBox в каждой строке. Вопрос: мог бы я выиграть от создания переменной, когда у меня есть несколько ссылок на элемент HTML?

Или переменная все еще будет искать связанный элемент каждый раз, когда я обращаюсь к нему? Пример:

var $myBox = $('#myBox');

$myBox.css('background', 'grey');
$myBox.click( function(e){ console.log( 'Box clicked' ); });
$myBox.html(' Just a test text ');

Ответ 1

var $myBox = $('#myBox');

Более эффективен, но может быть хуже, когда '#myBox' изменяется динамически. Если вы сохраните изменения var $myBox, но не '#myBox', вам придется вручную переназначить var $myBox, что очень сложно для больших приложений. В общем, я бы сказал, что лучше сохранить такие оптимизации в рамках одной функции, а не всего приложения.

Очень простой пример здесь, в plunkr. Более реалистичным было бы, когда контент изменяется в соответствии с некоторым вызовом API.

Ответ 2

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

var time = new Date().getTime();
$('#myBox').css('background', 'grey');
$('#myBox').click( function(e){ console.log( 'Box clicked' ); });
$('#myBox').html(' Just a test text ');
console.log('Miliseconds without variable',new Date().getTime() - time);

var time2 = new Date().getTime();
var $myBox = $('#myBox2');

$myBox.css('background', 'grey');
$myBox.click( function(e){ console.log( 'Box clicked' ); });
$myBox.html(' Just a second text ');
console.log('Miliseconds with variable',new Date().getTime() - time2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myBox"></div>
<div id="myBox2"></div>

Ответ 3

Повторное использование ссылки на селектор, ваш второй случай, определенно быстрее. Здесь тест: http://jsperf.com/caching-jquery-selectors Последний случай, переопределяющий ваши селекторы, сообщается как ~ 35% медленнее.