document.getElementbyIDと変数の宣言と削除のパフォーマンス

Question

私のアプリケーションに本当に良いパフォーマンスが必要な場合は、もっと適切なことを知りたいと思います。私はPhoneGap経由でクロスプラットフォームのアプリケーションをプログラミングしています。コードは非常に重要です。

より適切である：

document.getElementbyID('id').addEventListener() 

または

var id = document.getElementbyID('id'); 
id.addEventListener(); 

とどのように私は私のアプリのキーワードのパフォーマンスを向上させるために、「削除」を使用することができますか？

Answer 1

両者の差が限界であろう。パフォーマンスを向上させるには、DOMに追加するイベントハンドラの数を最小限に抑え、再度必要のないイベントハンドラを削除する必要があります。あなたが投稿した文脈では、削除は意味をなさない。 （連想）配列内の項目を解放するか、または作成したオブジェクトを削除するために使用する必要があります。あなたはあなたの例の中のどちらもしません。

各項目がクリック可能なリストでは、個々の要素ではなく、リストコンテナに1つのイベントハンドラを添付するだけです。ハンドラに渡されたイベントオブジェクトのtargetプロパティを使用して、タップされた実際のリスト項目を見つけることができます。

---

編集：li.idがクリックされた実際のアイテムを識別するために使用される複数のリスト項目

のための一つのイベントハンドラを使用する方法の例。 'li'に子がある場合は、正しい項目が見つかるまでターゲットのDOMツリーを上る必要があります。

<ul id="list"> 
    <li id="item_1">First Item</li> 
    <li id="item_2">Second Item</li> 
    <li id="item_3">Third Item</li> 
    <li id="item_4">Fourth Item</li> 
    <li id="item_5">Fifth Item</li> 
    <li id="item_6">Sixth Item</li> 
    <li id="item_7">Seventh Item</li> 
</ul> 

<script> 
    window.onload(function() { 
     document.getElementById("list").addEventListener("click", 
      function(event) { alert("" + event.target.id + " was clicked"); }); 
    }); 
</script> 

Answer 2

JavaScriptは実行時に解釈されるため、最終的にはコンパイラが変数の割り当てを最適化するかどうかによって異なります。いずれにしても、その差はごくわずかです。いくつかのテストを構築し、参照してください。

読みやすさに焦点を当て（マイクロ最適化が心配されていないモデルを見つける）。

キーワード「削除」を使用して アプリのパフォーマンスを向上させるにはどうすればよいですか？

パフォーマンスを重視するアプリケーションについて議論しているので、JavaScriptで適切なガベージコレクションに関心があると思います。あなたが複数回、他のDOM要素を必要とする場合、それは両方の方法で同じ時間を要する

var id = document.getElementbyID('id'); 
id.addEventListener(); 

を使用することをお勧めしHow does garbage collection work in JavaScript?

Answer 3

を参照してください。

Answer 4

this testによると、私はちょうどjsperf.comで行いました。document.getElementbyID('id').addEventListener()が最も速い方法です。 - Mac OS XのChromeで

Try itなどのブラウザを使用し、テストして、あなたが話していたdeleteなどの機能を追加/削除します。