$（ "＃my_input"）.val（）の値を持つ変数は、$（ "＃my_input"）のものよりもスペースが少なくなりますか？

Question

jQuery/Javascriptコードを最適化してコードスタイルを改善する方法を探しています。

私のようなプロのブログや信頼できるソースを参照してきた：

https://google.github.io/styleguide/jsguide.html

https://learn.jquery.com/performance/optimize-selectors

しかし、また、「...かしら」しばらくしていたし、周りで遊んでいました大きな関数の初めにセレクタを定義します。例えば

、というより：私は疑問に思い

var myFunction_B() { 
var $my_input = $("#my_input"); 
// lots of code 

if ($my_input.val() === "x") { 
// do something 
} 

} 

：

var myFunction_A() { 
// lots of code 

var my_input = $("#my_input").val(); 

if (my_input === "x") { 
// do something 
} 

} 

これを行う

• を変数$my_inputはmy_inputよりもサイズが大きくなりますか？
• my_inputを使用するよりも遅くなるのは$my_inputですか？

これは、サイトを使用して私の最初の時間ですが、私はjsPerf testを走り、第1のセレクタを定義すること（〜6から10までパーセント）高速ですが、それでも可変サイズについて確認していないようです。

$my_input = $("#my_input")が大きくなると思われますが、私はおそらく「裏口の裏に」my_input = $("#my_input").val()がまだ完全な要素値への参照を「保持」している可能性があると考えました。

HTML

<input id="#something1"> 
<input id="#something2"> 
<input id="#something3"> 
<input id="#something4"> 
<input id="#something5"> 

jQueryの

テスト01

var $something_01 = $("#something1"); 
var $something_02 = $("#something2"); 
var $something_03 = $("#something3"); 
var $something_04 = $("#something4"); 
var $something_05 = $("#something5"); 

console.log($something_01.val()); 
console.log($something_02.val()); 
console.log($something_03.val()); 
console.log($something_04.val()); 
console.log($something_05.val()); 

テスト02

console.log($("#something1").val()); 
console.log($("#something2").val()); 
console.log($("#something3").val()); 
console.log($("#something4").val()); 
console.log($("#something5").val()); 

Answer 1

可変サイズは異なります.1つのケースでは、大きなデータセットを持つオブジェクトです。多くの参考文献があります。 $my_input
であり、他方では単純なオブジェクトであり、他のもののネイティブ変数です。はるかに小さい。 my_input

ただし、同じ機能（CPUコール）が行われたため、実演した使用方法はパフォーマンスにほとんど影響しません。

の場合は、変数を削除して直接比較することもできます。

var myFunction_B() { 

if ($("#my_input").val() === "x") { 
// do something 
} 

}