Javascript document.getElementbyID与变量声明和删除性能

如果我真的需要我的应用程序有好的性能，我想知道什么更合适。我正在通过PhoneGap编写跨平台应用程序，我编写代码的方式非常关键

哪一个更合适：

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

或

---

我如何使用关键字“删除”来提高我的应用程序的性能

JavaScript是在运行时解释的，因此最终取决于编译器是否优化了该变量分配。无论哪种方式，差异都将非常小。构建一些测试并查看

关注可读性（并找到一个不用担心微观优化的模型）

如何使用关键字“delete”来提高 我的应用程序

由于您讨论的是性能密集型应用程序，我假设您对JavaScript中的适当垃圾收集感兴趣。请参见

最好使用

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

如果您不止一次需要DOM元素，那么这两种方法都需要相同的时间。

根据我刚才在上所做的，

document.getElementbyID（'id'）。addEventListener（）

似乎是最快的方法。-在MacOSX上的Chrome中

在所需的浏览器上，编辑测试以添加/删除功能，如您所说的

delete

---

两者之间的差异将是微不足道的。为了提高性能，应该尽量减少添加到dom中的事件处理程序的数量，并删除不再需要的事件处理程序。删除在您发布的上下文中没有意义。它应用于释放（关联）阵列中的项或删除您创建的对象。在你的例子中，你两个都不做

对于每个项目都可单击的列表，您应该只将一个事件处理程序附加到列表容器，而不是单个元素。然后，您可以使用传递到处理程序中的事件对象的target属性来查找被点击的实际listitem

---

edit：关于如何对多个列表项使用一个事件处理程序的示例

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>

第一项
第二项
第三项
第四项
第五项
第六项
第七项

window.onload（函数（）{
document.getElementById（“列表”）.addEventListener（“单击“，
函数（事件）{alert（“+event.target.id+”已单击”）；}）；
});

这与性能无关。如果同时对上万个元素执行此操作，可能会有微观差异，但事实并非如此。

delete

用于删除对象属性。例如

varx={y:1}；删除x.y

@jamesalardice-是的，只是为了我自己的缘故才查到的…编辑了我的帖子以反映。通过使用变量，可以防止对同一元素多次遍历文档。看起来jsperf可能有点困惑。更高的ops/sec意味着更好的性能（它甚至指出“最慢”的测试是-123%（注意它是一个负数）更慢…）所以实际上，

var

测试是最快的。好吧，现在我很困惑哈哈！哪个更快？红色指示确实表明后者速度更快。谢谢你们的帮助+1推荐一个很酷的工具…但是，即使在同一个浏览器中间隔几秒钟的测试之间，我也得到了非常不同的结果（另外，我注意到@jamesalardice指出的差异）。嗨！对于noob的问题很抱歉，但是你能给我举一个使用你建议的“target”属性方法的例子吗。非常感谢你！

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