javascript - 如果函数被多次调用，在函数中缓存选择器是否性能更高？

Question

好的，我想我知道这个问题的答案，希望确认一下。所以我有一个只使用一次的选择器，但它在一个被调用多次的函数中使用。从性能的 Angular 来看，由于每次调用该函数时都会重新搜索该选择器，因此缓存该选择器可能(尽管略微)更好？

换句话说，下面...

function testFunction() {
  alert($("#input").val())
}

$("#a").click(function() {
  testFunction()
})

$("#b").click(function() {
  testFunction()
})

$("#c").click(function() {
  testFunction()
})

...性能不如下面

input = $("#input")

function testFunction() {
  alert(input.val())
}

$("#a").click(function() {
  testFunction()
})

$("#b").click(function() {
  testFunction()
})

$("#c").click(function() {
  testFunction()
})

Answer 1

显然，jQuery() 调用完成的总时间少于对 jQuery 对象的变量引用。上次运行记录

• jQuery():16.580 毫秒
• 缓存的 jQuery() 对象:22.885 毫秒

(function() {

  function testFunction() {
    $("#input").val()
  }

  console.time("jQuery()");

  for (let i = 0; i < 10000; i++) {
    testFunction()
  }
  
  console.timeEnd("jQuery()");
  
})();

(function() {

  let input = $("input");

  function testFunction() {
    input.val()
  }

  console.time("cached jQuery() object");

  for (let i = 0; i < 10000; i++) {
    testFunction()
  }
  
  console.timeEnd("cached jQuery() object");
  
})();

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