javascript onclickハンドラのパフォーマンスに関する問題

Question

私はJavaスクリプトでゲームを書いていますが、動作している間に複数のクリックに応答するのが遅いです。以下は、クリックを処理するために使用しているコードの非常に単純化されたバージョンです。十分長く待たなければ2の2回目のクリックに応答できません。これは私がただ受け入れる必要があるか、または次のクリックのために準備するより速い方法がありますか？

私はquirksmodeレコーディングコンテストのAddEventを使用してこの関数をアタッチします。

var selected = false; 
var z = null; 
function handleClicks(evt) { 
    evt = (evt)?evt:((window.event)?window.event:null); 
    if (selected) { 
     z.innerHTML = '<div class="rowbox a">a</div>'; 
     selected = false; 
    } else { 
     z.innerHTML = '<div class="rowbox selecteda">a</div>'; 
     selected = true; 
    } 
} 

ライブのコードでは、私はあなたの問題は、巨大なパフォーマンスの問題であるDOMを変更innerHTMLの変化であると考えていhttp://www.omega-link.com/index.php?content=testgame

Answer 1

：よう

何か。変更はすぐに行われますが、2回目のクリックは待たなければ無視されます。 mousedownイベントまたはmouseupイベントのいずれかに変更することをお勧めします。

Answer 2

で見ることができます。

Answer 3

DOMにdivを追加/削除するのではなく、innerHTMLプロパティと同じように、クラス名を変更することができます。私はあなたの問題は第二のクリックでDBLCLICKイベントとしてではなく、クリックイベントとして登録されていることだと思います

var selected = false; 
var z = null; 

function handleClicks(evt) 
{ 
    var tmp; 

    if(z == null) 
     return; 

    evt = (evt)?evt:((window.event)?window.event:null); 
    tmp = z.firstChild; 
    while((tmp != null) && (tmp.tagName != 'DIV')) 
     tmp = tmp.firstChild; 
    if(tmp != null) 
    { 
     if (selected) 
     { 
     tmp.className = "rowbox a"; 
     selected = false; 
     } else 
     { 
     tmp.className = "rowbox selecteda"; 
     selected = true; 
     } 
    } 
} 

Answer 4

うん、あなたも（のdocument.createElementに対してinnerHTMLプロパティのパフォーマンスを比較したい）、または可能性があります

• ：あなたのコードをプロファイリング

  el.style.display = 'block' // turn off display: none. 
  

  はあなたのA/Bの様々なリファクタリングとして役立つかもしれませんhttp://www.mozilla.org/performance/jsprofiler.html

• http://developer.yahoo.com/yui/profiler/
• http://weblogs.asp.net/stevewellens/archive/2009/03/26/ie-8-can-profile-javascript.aspx