javascript - 将 HTML 元素分配给变量在 Javascript 中有什么特别的优势吗？

Question

考虑 Javascript 代码的两部分，它们完成完全相同的事情:

版本 1:

document.getElementById("test").style.backgroundColor = "green";
document.getElementById("test").style.borderColor = "red";
document.getElementById("test").style.borderStyle = "dashed";
document.getElementById("test").style.borderWidth = "thin";
document.getElementById("test").style.borderStyle = "dashed";
document.getElementById("test").style.margin = "0";
document.getElementById("test").style.padding = "0";

版本 2:

var testDiv = document.getElementById("test");
testDiv.style.backgroundColor = "green";
testDiv.style.borderColor = "red";
testDiv.style.borderStyle = "dashed";
testDiv.style.borderWidth = "thin";
testDiv.style.borderStyle = "dashed";
testDiv.style.margin = "0";
testDiv.style.padding = "0";

抛开哪一个需要更长的输入时间，或任何其他人工输入或可读性问题，哪一个比另一个效率更高或更低？除了他们对人类的看法之外，还有什么可以区分他们吗？换句话说，除了一个人的个人编码风格之外，还有什么其他原因可以选择一个而不是另一个吗？

Answer 1

每次调用 getElementById() 都会强制浏览器在 DOM 中执行另一次查找，与直接引用相比，这是一个显着的性能损失。

您可以通过制作 JSPerf 来测试这样的事情 - here's one for your question这显示了重用查找的 DOM 节点带来的性能提升(至少在我的浏览器上是这样)。