Проблемы с производительностью в обработчике javascript onclick

Question

Я написал игру на java-скрипте, и пока она работает, она медленно реагирует на несколько кликов. Ниже приведена очень упрощенная версия кода, который я использую для обработки кликов, и он по-прежнему не отвечает на второй щелчок 2, если вы не подождете достаточно долго. Это то, что мне нужно просто принять, или есть более быстрый способ быть готовым к следующему клику?

Кстати, я присоединяю эту функцию, используя AddEvent из конкурса перекодирования quirksmode.

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;
    }
}

Живой код можно увидеть по адресу http://www.omega -link.com / index.php? Content = testgame

Answer 1

Вы можете попытаться изменить только имя класса вместо удаления / добавления div в DOM (что и делает свойство innerHTML).

Что-то вроде:

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 2

Я думаю, что ваша проблема в том, что второй щелчок регистрируется как событие dblclick, а не как событие click. Изменение происходит быстро, но 2-й щелчок игнорируется, если вы не подождете. Я бы предложил перейти к событию mousedown или mouseup.

Answer 3

Да, вы можете сравнить производительность innerHTML с document.createElement () или даже:

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

Профилирование вашего кода может быть полезным при различных рефакторингах:

• 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

Answer 4

Я считаю, что ваша проблема - это изменение innerHTML, которое меняет DOM, что является огромной проблемой производительности.