Is it more performant to cache a selector in a fun

Question

Ok I think I know the answer to this, looking to confirm. So I have a selector that's only used once, but it's used inside a function that's called several times. From a performance perspective, since that selector is re-searched-for each time the function is called, it's probably (albeit marginally) better to cache the selector?

In other words, the below...

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

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

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

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

...is not as performant as the below

input = $("#input")

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

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

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

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

Answer 1

Yes you are right the second one is more efficient than the first one because

In the first one to select the input filled first it going to find the input field then it select that input field,And this will happen each time of function call.

But in second case the selector is select once when the page is loaded the it refers that selector through the variable and will not go to find that input field in each call.That why 2nd one is more efficiency.

        <input value='Value' id='input'><br>
        <span id='tt'>dssd</span><br>
        <span id='t1'></span><br>
        <span id='t2'></span>

And Jquery:-

 function testFunction1() {
        var t=$("#input").val()
        $("#tt").html(t);
    }
    console.time("jQuery() object");
    var t1=performance.now();
    for (var i = 0; i < 50000; i++) {
        testFunction1()
    }
    console.timeEnd("jQuery() object");

    var t2=performance.now();
    t2=t2-t1;
    $("#t1").html('Without selector variable:- '+t2);
    var input = $("input");
    function testFunction2() {
        var t=input.val();
        $("#tt").html(t);
    }
     t1=performance.now();
    console.time("cached jQuery() object");
    for (var i = 0; i < 50000; i++) {
        testFunction2()
    }
     t2=performance.now();
    console.timeEnd("cached jQuery() object");
    t2=t2-t1;
    $("#t2").html('With selector variable:- '+t2);

Just Check here:-click here

Answer 2

Evidently, jQuery() call completes in less total time than variable reference to jQuery object. Last run logged

• jQuery(): 16.580ms
• cached jQuery() object: 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>