javascript - 一次又一次使用相同的查询选择器是否会产生性能成本？

Question

在文档中搜索相同查询选择器的性能成本是否会增加很大，或者是否在管道中执行某些代码 - 来自正在使用的 JavaScript 库(例如 jquery)或 JavaScript 引擎或浏览器引擎——缓存查询选择器。

$(document).ready(function() {

  var foo = $("#foo");

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

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

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

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

  ...
});

我确实了解对象的生命周期，尤其是。在垃圾收集的环境中。因此，对象的范围将决定其生命周期的答复并不能完全满足我的好奇心，因为这个事实是显而易见的。

我的问题确实是，如果我一遍又一遍地访问 $("#foo")，

1. 这会增加大量的 CPU 时间吗？因此，在我的代码中以适当的级别缓存它会避免这种成本，或者

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 对象确实需要非零的 CPU 时间，但仍然不多。如果您确实必须担心效率，您可能只需使用标准 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>