Javascript:GetElementById-DOM何时命中？

我正在这样做：

var hpl = doc.getElementById("hpl");

然后这个：

hpl.style.height = 28 + "px";

我的问题：我是否访问DOM两次，一次引用元素，然后第二次设置样式高度

如果是这样的话，那么我的结论是否正确：这对于DOM调用来说是低效的，即使它很好地最小化了

var hpl = document.getElementById("hpl");
if (test === "Abel") {
    hpl.style.height = 28 + "px";
} else {
    hpl.style.height = 42 + "px";
}

所以这在速度方面会更好：

if (test === "Abel") {
    document.getElementById("hpl").style.height = 28 + "px";
} else {
    document.getElementById("hpl").style.height = 42 + "px";
}

我有一个jsperf，它表明没有真正的区别，尽管我想理解这背后的理论。

---

谢谢。

据我所知，一旦您通过Id访问了DOM元素一次，它就会被放入字典中供以后快速参考（如哈希表/hasmap）

据我所知，一旦您通过Id访问了DOM元素一次，它就会被放入字典中供以后快速参考（如hashtable/hasmap）

从访问DOM的角度来看，这两种不同的方法没有什么不同

var hpl = doc.getElementById("hpl");
hpl.style.height = 28 + "px";

这将查找具有

id=“hpl”

的DOM元素，将其放入局部变量中，然后使用局部变量直接引用DOM元素（无需搜索）对其进行修改

---

当您这样做时：

document.getElementById("hpl").style.height = 28 + "px";

唯一的区别是您没有将其存储在局部变量中（尽管它存储在javascript引擎内部）。它仍然通过查找具有

id=“hpl”

的DOM元素来获取DOM元素，然后使用对DOM元素的引用来直接设置样式值。这与第一种方法没有显著差异

---

存储对DOM元素的引用是访问DOM元素的一种非常有效的方法。不需要搜索。在浏览器/javascript引擎内部，DOM引用是一种数据结构，它包含一种快速访问实际DOM对象的方法（可能是指向它的指针，但实际实现取决于浏览器）。

从访问DOM的角度来看，您使用的两种不同方法没有什么不同

var hpl = doc.getElementById("hpl");
hpl.style.height = 28 + "px";

这将查找具有

id=“hpl”

的DOM元素，将其放入局部变量中，然后使用局部变量直接引用DOM元素（无需搜索）对其进行修改

---

当您这样做时：

document.getElementById("hpl").style.height = 28 + "px";

唯一的区别是您没有将其存储在局部变量中（尽管它存储在javascript引擎内部）。它仍然通过查找具有

id=“hpl”

的DOM元素来获取DOM元素，然后使用对DOM元素的引用来直接设置样式值。这与第一种方法没有显著差异

---

存储对DOM元素的引用是访问DOM元素的一种非常有效的方法。不需要搜索。在浏览器/javascript引擎内部，DOM引用是一种数据结构，它包含一种快速访问实际DOM对象的方法（可能是指向它的指针，但实际实现取决于浏览器）。

现在的计算机每秒可以执行

document.getElementById

函数数百万次。不要在上面浪费时间。无论如何，DOM元素在调用后会被缓存。比在局部变量中保存

getElementById

和重复它之间的任何性能差异更重要的是，保存到局部变量是更干净、更少混乱的代码。在这里使用局部变量——并不是因为它更快（虽然速度非常快，但与任何

getElementById

浏览器可能实现或可能不实现的优化无关），而是因为它读起来更好。（它也不太容易出错——你没有两次输入“hpl”就更容易出错，更不用说其他重复的字符了。）现在的计算机每秒可以执行

文档.getElementById

功能数百万次。不要在上面浪费时间。无论如何，DOM元素在调用后会被缓存。比在局部变量中保存

getElementById

和重复它之间的任何性能差异更重要的是，保存到局部变量是更干净、更少混乱的代码。在这里使用局部变量——并不是因为它更快（虽然速度非常快，但与任何

getElementById

浏览器可能实现或可能不实现的优化无关），而是因为它读起来更好。（它也不太容易出错——您没有两次输入“hpl”，更不用说其他重复的字符了）这是实现决策的质量。任何规范中都不要求

getElementById

具有任何特定的性能特征，因此最好只执行一次。（对于这种情况，浏览器通常会有内部优化，但您不应该不必要地依赖它们。）这是实现质量的决定。任何规范中都不要求

getElementById

具有任何特定的性能特征，因此最好只执行一次。（浏览器通常会对这种情况进行内部优化，但您不应该不必要地依赖它们。）再次感谢您的帮助。顺便说一句，在类似单例的情况下，将引用存储为可由多个方法或私有函数访问的属性/私有变量被认为是好的还是坏的形式？@Nick-是否将DOM引用存储在私有变量中是一种折衷。如果您经常访问它，那么存储它可以提高性能。但是，如果您的页面是动态的（删除和创建DOM元素），那么存储引用可能会导致内存泄漏或错误的引用，如果在更改DOM元素后没有更新该引用。没有对错，这取决于环境。干杯。我认为我很安全，但我想暂时停止内存泄漏。再次感谢你的帮助。顺便问一下，在类似于单例的情况下，存储引用a被认为是好形式还是差形式