HTML5 Web 应用程序的更好实践：使用 getElementByID 或存储引用？答案

【问题标题】：Better practice for HTML5 web app: using getElementByID or storing a reference?HTML5 Web 应用程序的更好实践：使用 getElementByID 或存储引用？
【发布时间】：2012-11-10 05:01:59
【问题描述】：

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

由于我对这方面还很陌生，因此我正在努力培养一些良好的编码习惯，遵循最佳实践，优化性能，并最大限度地减少资源受限 iPhone 上的负载。

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

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

（我在引号中使用“全局”，因为我真的只有一个真正的全局变量 - 它是一个将我的所有“全局”变量存储为属性的对象）。

我假设每次使用 getElementByID 都必须有一些开销，因为该函数需要遍历 DOM 才能找到 div。但是，我不确定这个功能的繁重程度或效率。

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

那么 - 哪个更好？或者，这两个选项是否会消耗如此微不足道的资源，以至于我应该担心哪个会产生更易读、更可维护的代码？

非常感谢！

【问题讨论】：

当我在闭包中工作时，我总是尝试保存对事物的引用并牢记范围。它肯定会加速你的 javascript。

标签： javascript html

【解决方案1】：

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

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

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

尤其是在现代浏览器中，它非常快，但不如在全局对象上查找属性快。

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

微不足道。它只是一个指向已经存在的对象的指针。如果您从 DOM 中删除该元素而不打算再次使用它，那么您当然会想要释放对它的持有。

“那么 - 哪个更好？或者，这两个选项是否消耗如此微不足道的资源，我应该担心哪个会产生更易读、可维护的代码？”

完全取决于情况。如果您只获取它几次，那么您可能会发现将其添加到您的全局对象中是不值得的。您需要获取相同元素的次数越多，缓存它就越有意义。

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

【讨论】：

jsperf 手动记忆 getelementbyid 不好
@mattstuehler 我每天都在谋杀开发人员，因为他们传递元素 ID。参考肯定是要走的路。如果你对闭包的使用很聪明，你可以避免污染全局命名空间。请记住：DOM 访问是昂贵的。向页面添加多个元素时，请执行“提交”样式并等到所有节点都生成后再附加它们。从文档中获取某些内容时，请尽可能保存结果。

【解决方案2】：

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

所以缓存元素的主要原因是避免冗长的 document.getElementById(... 语法，或者避免元素 ID 字符串散布在代码中。

【讨论】：