更好地练习HTML5 Web应用程序:使用getElementByID或存储引用?

时间:2011-08-05 22:54:39

标签: javascript html5

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

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

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

一般情况下 - 每次我需要一个div的句柄时,我最好使用getElementByID,还是应该在开始时存储我在“全局”变量中访问的每个div的引用?

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

我假设每次使用getElementByID都必须有一些开销,因为函数需要遍历DOM才能找到div。但是,我不确定这个功能是多么费力或有效。

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

那么 - 哪个更好?或者,这两个选项是否会消耗如此少量的资源,我应该担心这会产生更易读,可维护的代码?

非常感谢提前!

2 个答案:

答案 0 :(得分:6)

  

“一般情况下 - 每次我需要div的句柄时,我最好使用getElementByID,还是应该存储每个div的引用”

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

  

“我假设每次使用getElementByID都必须有一些开销,因为函数需要遍历DOM才能找到div。但是,我不确定这个函数是多么费力或有效。”

在现代浏览器中,它非常快,但速度不如在全局对象上查找属性那么快。

  

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

微不足道的。它只是指向已存在的对象的指针。如果您从DOM中删除该元素而无意再次使用它,那么您当然希望释放它。

  

“那么 - 哪个更好?或者,这两个选项是否会消耗如此少量的资源,我应该担心这会产生更易读,可维护的代码?”

完全取决于这种情况。如果您只提取了几次,那么您可能觉得不值得添加到全局对象中。获取相同元素所需的越多,它对缓存它的意义就越大。


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

答案 1 :(得分:2)

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

因此,缓存元素的主要原因是避免使用相当冗长的document.getElementById(...语法,或者避免将元素ID字符串分散在整个代码中。