Javascript HTML5Web应用的更好实践：使用getElementByID还是存储引用？

我正在使用HTML5构建我的第一个网络应用程序之一，专门针对iPhone

因为我对这方面还不太熟悉，所以我正在努力培养一些好的编码习惯，遵循最佳实践，优化性能，并尽量减少资源有限的iPhone上的负载

我需要经常做的一件事。。。我有许多div（每个div都有一个唯一的id），我经常更新（例如，使用innerHTML）或修改（例如，使用webkit转换和转换的样式属性）

一般来说，每次我需要一个div的句柄时使用getElementByID是更好的选择，还是应该在开始时将对我访问的每个div的引用存储在“全局”变量中

（我在引号中使用了“global”，因为我实际上只得到了一个真正的global变量——它是一个将所有“global”变量存储为属性的对象）

我假设每次使用getElementByID都会有一些开销，因为该函数需要遍历DOM才能找到div。但是，我不确定该函数有多费力或效率如何

使用全局变量存储每个元素的句柄必须消耗一些内存，但我不知道这些引用是否只需要少量RAM，或者更多

那么，哪一个更好呢？或者，这两个选项是否都消耗了如此微不足道的资源量，以至于我只需要担心哪个选项会产生更可读、更可维护的代码

非常感谢

“一般来说-每次需要一个div句柄时使用getElementByID更好吗，还是应该存储对每个div的引用？”

当您调用

getElementById

时，您要求它执行一项任务。如果在使用相同的参数调用相同的方法时不希望得到不同的结果，那么缓存结果似乎是有意义的

“我假设每次使用getElementByID都会有一定的开销，因为该函数需要遍历DOM才能找到div。但是，我不确定该函数有多费力或效率如何。”

特别是在现代浏览器中，它的速度非常快，但不如在全局对象上查找属性那么快

“使用全局变量存储每个元素的句柄必须消耗一些内存，但我不知道这些引用是否只需要少量RAM，或者更多。”

琐碎的。它只是指向已经存在的对象的指针。如果您从DOM中删除该元素而不打算再次使用它，那么您当然希望释放对它的控制

“那么，哪一个更好呢？或者，这两个选项都消耗了如此微不足道的资源，以至于我应该只考虑哪一个会产生更可读、更可维护的代码？”

这完全取决于形势。如果只获取了几次，那么您可能会发现不值得添加到全局对象中。获取同一元素所需的次数越多，缓存它的意义就越大

---

---

比较一下。当然，DOM的大小、变量范围遍历的长度以及全局对象中属性的数量/深度都会起到一定的作用。

使用局部变量甚至对象属性比使用getElementById（）快得多。但是，这两种操作都非常快，因此它们的性能通常与拥有元素后可能执行的任何其他操作无关。在元素上设置单个属性的事件要比通过任何一种方法检索它慢几个数量级

---

因此缓存元素的主要原因是为了避免冗长的document.getElementById（…语法，或避免元素ID字符串分散在代码中。

在使用闭包时，我总是尝试保存对事物的引用，并记住作用域。这肯定会加快javascript的速度。手动记忆getelementbyid是非常必要的bad@mattstuehler我每天都因为传递元素ID而谋杀开发人员e当然可以。如果你善于使用闭包，你可以避免污染全局名称空间。记住：DOM访问是昂贵的。当向页面添加多个元素时，请执行“提交”设置样式并等待所有节点生成后再附加。从文档中获取内容时，如果可能，请保存结果。