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

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

0 голосов
/ 17 сентября 2018

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

$(document).ready(function() {

  var foo = $("#foo");

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

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

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

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

  ...
});

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

Мой вопрос на самом деле: если бы я снова и снова обращался к $("#foo"),

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

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

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

1 Ответ

0 голосов
/ 17 сентября 2018

Да, это влияет на производительность.Каждый раз, когда запускается $(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 занимает ненулевое количество процессорного времени, но оно все же не так много.Если вам do нужно беспокоиться об эффективности, вы можете просто использовать вместо этого стандартный 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>
...