Question

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

换句话说，下面......

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.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>

Answer 2

是的，你是对的，第二个比第一个更有效，因为

在第一个选择输入填充的第一个它将找到输入然后它选择那个输入字段，这将在每次函数调用时发生。

但是在第二种情况下，选择器在页面加载时选择一次，它通过变量引用选择器，并且不会在每次调用中找到该输入字段。这就是为什么第二个更有效率。

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

和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);

请点击此处： - click here

如果该函数被多次调用，那么在函数中缓存选择器会更有效吗？

2 个答案: