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

Question

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

哪个更合适：

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

或

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

如何使用关键字“删除”来提高应用的效果？

Answer 1

根据我this test刚刚提出的jsperf.com，document.getElementbyID('id').addEventListener()似乎是最快的方法。 - 在Mac OS X上的Chrome中。

在所需的浏览器上

Try it，然后编辑测试以添加/删除您正在讨论的delete等功能。

Answer 2

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

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

---

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

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>

Answer 3

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

注重可读性（找到一个你不担心微观优化的模型）。

  

如何使用关键字＆＃34;删除＆＃34;改善表现   我的应用程序？

由于您正在讨论性能密集型应用程序，我假设您对JavaScript中正确的垃圾收集感兴趣。见How does garbage collection work in JavaScript?

Answer 4

最好使用

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

如果您不止一次需要DOM元素，则两种方式都需要相同的时间。