0

我正在这样做：

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表明没有真正的区别，尽管我想了解这背后的理论。谢谢。

4

2 回答 2

2

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

于 2012-09-23T05:13:30.103 回答
1

从访问 DOM 的角度来看，您执行此操作的两种不同方式没有什么不同。

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

这会找到具有 的 DOM 元素id="hpl"，将其放入局部变量中，然后使用局部变量直接引用 DOM 元素（无需搜索）来修改它。

当你这样做时：

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

唯一的区别是您不将其存储在局部变量中（尽管它存储在 javascript 引擎内部）。它仍然通过查找具有的 DOM 元素来获取 DOM 元素，id="hpl"然后使用对 DOM 元素的引用来直接设置样式值。这种方式与第一种方式没有显着差异。

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

于 2012-09-23T05:23:49.063 回答