HTML5 web应用的最佳实践是:使用getElementByID或存储引用

Better practice for HTML5 web app: using getElementByID or storing a reference?

本文关键字：使用 getElementByID 引用存储应用 web 最佳 HTML5 更新时间：2023-09-26

我正在使用HTML5构建我的第一个web应用程序之一，特别是针对iphone。

由于我是新手，我正在努力养成一些良好的编码习惯，遵循最佳实践，优化性能，并尽量减少资源有限的iPhone上的负载。

我需要经常做的一件事是……我有许多div(每一个都有一个唯一的id)，我经常更新(例如，用innerHTML)，或修改(例如，样式属性与webkit过渡和转换)。

在一般情况下-我最好使用getElementByID每次我需要一个句柄到一个div，或者我应该存储引用到每个div我访问在"全局"变量在开始?

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

我假设每次使用getElementByID必须有一些开销，因为函数需要遍历DOM来找到div。但是，我不确定这个函数是多么繁重或高效。

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

那么，哪个更好呢?或者，这两个选项消耗的资源都非常少，以至于我只需要担心哪一个产生的代码更易读、更易于维护?

提前感谢!

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

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

"我认为每次使用getElementByID一定有一些开销，因为该函数需要遍历DOM来查找div。但是，我不确定这个函数有多费力或多高效。"

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

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

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

"那么——哪个更好?"或者，这两个选项消耗的资源都非常少，以至于我只需要担心哪一个产生的代码更易读、更易于维护?"

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

下面是一个比较的jsPerf测试。当然，DOM的大小以及变量作用域遍历的长度和全局对象中属性的数量/深度将发挥一定作用。

使用局部变量甚至对象属性比getElementById()快得多。但是，这两种操作都非常快，因此与获得元素后可能执行的任何其他操作相比，它们的性能通常无关紧要。

在元素上设置单个属性要比通过任何一种方法检索它慢几个数量级。

所以缓存元素的主要原因是为了避免冗长的document.getElementById(…