Есть ли затраты производительности на использование одного и того же селектора запросов снова и снова?

Question

Приводит ли увеличение производительности поиска одного и того же селектора запросов в документе к значительному или делает какой-то код в конвейере - из используемой библиотеки JavaScript (например, jquery), механизма JavaScript или механизма браузера - Селектор запросов кеша.

$(document).ready(function() {

  var foo = $("#foo");

  doThis();
  doThat();
  thenDoThat();
  ...

  function doThis() {
    $("#foo")...
    ...
  }

  function doThat() {
    $("#foo")...
    ...
  }

  function thenDoThat() {
    $("#foo")...
    ...
  }

  ...
});

Я понимаю время жизни объектов ESP. в мусорной среде. Таким образом, ответ о том, что объем объекта будет определять его продолжительность жизни, не совсем удовлетворит мое любопытство, поскольку этот факт очевиден.

Мой вопрос действительно, если я получил доступ $("#foo") снова и снова,

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

2. какой-то код уже кеширует его, или

3. это совершенно незначительно, независимо от того, сколько раз сделано?

Answer 1

Да, это влияет на производительность. Каждый раз $(selector) выполняется, новый объект jQuery должен быть создан. Тем не менее, воздействие будет довольно незначительным, если вы не запустите огромное количество за короткий промежуток времени. Например:

const t1 = performance.now();

for (let i = 0; i < 300000; i++) {
  const html = $('div').html();
}

const t2 = performance.now();

const div = $('div');
for (let i = 0; i < 300000; i++) {
  const html = div.html();
}

const t3 = performance.now();

console.log(t2 - t1);
console.log(t3 - t2);

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

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

const t1 = performance.now();
for (let i = 0; i < 300000; i++) {
  const html = $('div').html();
}
const t2 = performance.now();

const $div = $('div');
for (let i = 0; i < 300000; i++) {
  const html = $div.html();
}
const t3 = performance.now();

for (let i = 0; i < 300000; i++) {
  const html = document.querySelector('div').innerHTML;
}
const t4 = performance.now();

const div = document.querySelector('div')
for (let i = 0; i < 300000; i++) {
  const html = div.innerHTML;
}
const t5 = performance.now();

console.log('jQuery re-selection', t2 - t1);
console.log('jQuery saving reference', t3 - t2);
console.log('vanilla re-selection', t4 - t3);
console.log('vanilla saving reference', t5 - t4);

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