javascript - HTML5 网络应用的最佳实践 : using getElementByID or storing a reference?

Question

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

由于我对此很陌生，所以我正在尝试养成一些良好的编码习惯、遵循最佳实践、优化性能并最大限度地减少资源受限 iPhone 上的负载。

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

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

(我在引号中使用了“global”，因为我真的只有一个真正的global变量——它是一个将我所有的“global”变量存储为属性的对象)。

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

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

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

非常感谢!

Answer 1

"In general - am I better off using getElementByID each time I need a handle to a div, or should I store references to each div"

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

"I assume using getElementByID each time must have some overhead, since the function needs to traverse the DOM to find the div. But, I'm not sure how taxing or efficient this function is."

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

"Using global variables to store handles to each element must consume some memory, but I don't know if these references require just a trivial amount of RAM, or more than that."

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

"So - which is better? Or, do both options consume such a trivial amount of resources that I should just worry about which produces more readable, maintainable code?"

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

---

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