javascript onclick处理程序中的性能问题

我用java脚本编写了一个游戏，虽然它可以工作，但对多次点击的响应很慢。下面是我用来处理点击的代码的一个非常简化的版本，如果您没有等待足够长的时间，它仍然无法响应第二次点击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;
    }
}

var selected=false；
var z=null；
功能手柄点击（evt）{
evt=（evt）？evt:（（window.event）？window.event:null）；
如果（选定）{
z、 innerHTML='a'；
所选=假；
}否则{
z、 innerHTML='a'；
所选=真；
}
}

---

在

可以看到实时代码。我相信您的问题是更改

innerHTML

，这会改变DOM，这是一个巨大的性能问题。

我相信您的问题是更改

innerHTML

，这会改变DOM，这是一个巨大的性能问题。

您可以尝试只更改类名而不是向DOM中删除/添加div（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;
      }
    }
}

---

您可以尝试只更改类名，而不是向DOM中删除/添加div（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;
      }
    }
}

---

我认为您的问题在于，第二次单击注册为dblclick事件，而不是单击事件。更改发生得很快，但除非等待，否则第二次单击将被忽略。我建议更改为mousedown或mouseup事件。

我认为您的问题是第二次单击注册为dblclick事件，而不是click事件。更改发生得很快，但除非等待，否则第二次单击将被忽略。我建议更改为mousedown或mouseup事件。

是的，您可能希望将innerHTML的性能与document.createElement（）进行比较，甚至：

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

分析您的代码可能会有帮助，因为您需要A/B各种重构：

---

是的，您可能希望将innerHTML的性能与document.createElement（）进行比较，甚至：

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

分析您的代码可能会有帮助，因为您需要A/B各种重构：

---

好的，我实际上已经用innerHTML和DOM方法尝试过了。两者似乎反应速度相同。第一次点击的反应没有一点延迟（方块被高亮显示），第二次点击效果很好，如果在第一次点击后（我猜是计时，但大约1/4秒），在正常的游戏中，用户会点击一个方块高亮显示，然后再次点击移除方块。好的，实际上，我已经用innerHTML和DOM方法尝试了这一点。两者似乎反应速度相同。第一次点击的反应没有一点延迟（方块被高亮显示），第二次点击效果很好，如果不是在第一次点击后太快（我猜是计时，但大约1/4秒），在正常的游戏中，用户会点击一个方块来高亮显示，然后再次单击以删除该块。更改为“鼠标向上”似乎已经完成了操作。谢谢当然，现在我需要查找如何以跨平台的方式删除处理程序，但这是次要的。更改为鼠标向上似乎已经做到了这一点。谢谢当然，现在我需要查找如何以跨平台的方式删除处理程序，但这是一个小问题。但是，我已经尝试了两种方法，如果有任何区别的话，也没有什么区别。总的来说，这是个好主意，所以+1。然而，我已经尝试了两种方法，如果有什么区别的话，那也没有什么区别。虽然这并没有解决我遇到的问题，但如果我不需要的话，你确实非常重视不要删除和重新创建+1虽然它没有解决我遇到的问题，但如果我不需要删除和重新创建，您确实提出了一个很好的观点+1.