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

【问题标题】：Performance issues in javascript onclick handlerjavascript onclick 处理程序中的性能问题
【发布时间】：2010-10-27 10:58:48
【问题描述】：

我用 java 脚本编写了一个游戏，虽然它可以运行，但多次点击响应很慢。下面是我用来处理点击的代码的一个非常简化的版本，如果您等待的时间不够长，它仍然无法响应第二次点击 2。这是我需要接受的，还是有更快的方法为下一次点击做好准备？

顺便说一句，我使用 quirksmode recoding 竞赛中的 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;
    }
}

可在http://www.omega-link.com/index.php?content=testgame查看实时代码

【问题讨论】：

标签： javascript performance browser user-interface cross-browser

【解决方案1】：

您可以尝试仅更改类名，而不是向 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;
      }
    }
}

【讨论】：

虽然它没有解决我遇到的问题，但您确实提出了一个很好的观点，即如果我不需要，不要删除和重新创建。 +1

【解决方案2】：

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

【讨论】：

更改为鼠标向上似乎已经成功了。谢谢。当然，现在我需要查找如何以跨平台的方式删除处理程序，但那是次要的。

【解决方案3】：

我相信您的问题是 innerHTML 的更改会更改 DOM，这是一个巨大的性能问题。

【讨论】：

好的，我实际上已经尝试过使用 innerHTML 和 DOM 方法。两者似乎以相同的速度响应。第一次点击响应没有一点延迟（块被高亮），第二次点击效果很好，如果它在第一次之后没有发生太快（我猜这里的时间，但大约 1/4 秒）普通的游戏，用户点击一个方块来高亮它，然后再次点击来移除方块。

【解决方案4】：

是的，您可能想将 innerHTML 的性能与 document.createElement() 进行比较，甚至：

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

在您进行 A/B 各种重构时，分析您的代码可能会有所帮助：

【讨论】：

一般来说是个好主意，所以 +1。但是，两种方法我都试过了，几乎没有区别。