如果该函数被多次调用,那么在函数中缓存选择器会更高效吗?

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

换句话说,下面……

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

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

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

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

  
dssd

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

请点击这里: - 点击这里