为变量分配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来测试这样的东西 - 这里是你的问题,它显示了重新使用查找的DOM节点的性能增益(至少在我的浏览器上).