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

Question

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

哪个更合适:

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

要么

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

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

Answer 1

根据我刚刚在jsperf.com上做的这个测试,似乎是最快的方式. - 在Mac OS X上的Chrome中.document.getElementbyID('id').addEventListener()

在所需的浏览器上尝试,并编辑测试以添加/删除delete您正在谈论的功能.

Answer 2

两者之间的差异很小。为了提高性能，您应该最小化添加到dom中的事件处理程序的数量，并删除不需要的事件处理程序。在您发布的上下文中，删除没有意义。它应用于释放（关联）数组中的项目或删除您创建的对象。您在示例中都不执行任何操作。

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

编辑：有关如何将一个事件处理程序用于多个列表项的示例

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>