javascript – 如果多次调用该函数,在函数中缓存选择器会更高效吗？

2023年12月6日 242次阅读

好的,我想我知道答案,希望确认一下.所以我有一个只使用过一次的选择器,但是它被用在一个多次调用的函数中.从性能的角度来看,因为每次调用函数时都会重新搜索该选择器,所以缓存选择器可能(虽然稍微好一点)？

换句话说,下面……

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()
})

最佳答案 显然,jQuery()调用在比jQuery对象的变量引用更少的总时间内完成.上次运行记录

> jQuery()：16.580ms
>缓存jQuery()对象：22.885ms

(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>
点赞