2

考虑 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";

撇开哪一个需要更长的打字时间，或任何其他人工输入或可读性问题不谈，一个比另一个效率高还是低？除了它们在人类眼中的样子之外，还有什么可以区分它们的吗？换句话说，除了一个人的个人编码风格之外，还有什么理由选择一个而不是另一个？

4

4 回答 4

5

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

您可以通过制作一个 JSPerf 来测试这样的事情 -这是一个针对您的问题的问题，它显示了通过重用查找的 DOM 节点获得的性能增益（至少在我的浏览器上）。

于 2013-07-28T05:00:05.863 回答
1

是的，如果您只调用一次 getElementById() 并将其分配给一个变量，那么您可以加快您的代码速度（尽管可能不会那么快）。毕竟 getElementById() 是一个函数，需要在每次使用时进行评估。

于 2013-07-28T04:55:15.647 回答
1

将其存储在变量中效率更高，因为您不必在浏览器中重新运行 document.getElemebtById() 函数。您实际上是在缓存结果。如果定位元素的速度很慢，这可能会在某些情况下产生很大的不同。

这对于 getElementById 来说不会那么明显，因为它已经非常快了。然而，对于某些复杂的 JQuery 选择器，在许多情况下差异会非常明显

于 2013-07-28T04:55:36.907 回答
-1

它节省了很多时间。调用函数总是更昂贵（我有时会根据函数调用的数量对递归运行时进行 fag-packet 计算）

第二个版本缓存函数结果。

您甚至可以使用以下方法节省更多时间：

var testDivStyle = document.getElementById('test').style;
testDivStye.backgroundColor = "green";
// ...
于 2013-07-28T04:56:04.793 回答