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

Question

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

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

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

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

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

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

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

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

提前谢谢了!

Answer 1

"一般来说 - 每次我需要div的句柄时,我最好使用getElementByID,或者我应该存储对每个div的引用"

当你打电话时getElementById,你要求它执行任务.如果在使用相同的参数调用相同的方法时不期望不同的结果,那么缓存结果似乎是有意义的.

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

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

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

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

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

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

这是一个比较的jsPerf测试.当然,DOM的大小以及变量范围遍历的长度以及全局对象中属性的数量/深度将起一定作用.