JavaScript DOM性能

我的代码中有很多元素，它们必须被动态隐藏和显示。因此，我将使用大量的

document.getElementById（'x'）.style.display

。我决定使用不同的方法，创建两个函数来完成以下工作：

function displayNone(a){document.getElementById(a).style.display= "none";}
function displaybloack(a){document.getElementById(a).style.display="block";}

然后我将使用相关ID作为参数调用这些函数

---

我的问题是：当使用一种方法而不是简单地使用

document.getElementById（'x'）.style.display而不是通过函数调用时，是否会影响性能

我的问题是：当使用一种方法而不是另一种方法时，是否会影响性能

对。函数调用将变慢

问题是多少钱。答案是难以置信的少量。甚至有可能一些引擎会在调用过程中排队，从而导致性能损失为零。即使他们没有这样做，性能损失也可能以亚微秒为单位

与任何其他潜在的性能问题一样，正确的方法是构建应用程序，然后找到性能瓶颈，然后修复它们

在另一个主题上，正如一位评论员所提到的，不要通过DOM元素的ID来引用它们，而是将它们称为它们自己。不要像您正在做的那样将ID传递给函数，而是在每次调用函数时从ID中查找元素。相反，将DOM元素传递给函数。反复执行
getElementById
的成本将淹没额外函数调用的成本

您也不希望直接设置样式。而是定义一个类，例如

.hide { display: none; }

并通过在元素中添加或删除该类来打开和关闭元素：

function hide(e) { e.classList.add('hide'); }
function show(e) { e.classList.remove('hide'); }

“当使用一种方法而不是另一种方法时，性能会受到影响。”——“另一种”方法是什么？“直接不是通过函数调用”——“它有什么不同？”？仅仅通过一个函数调用？这与DOM性能无关。唯一的区别是函数调用，函数调用很便宜（至少与DOM操作相比）。对于同一个id，您不应该多次查询DOM。请将元素分配给变量，并将元素作为参数传递，而不是id。您的答案非常有用，您还添加了其他信息。您已经声明“不要像现在这样将ID传递给函数，每次调用函数时都要从ID中查找元素。相反，请将DOM元素传递给您的函数”请给我代码好吗example@Tim例如，请参见我提供的
hide
和
show
函数。如果您想调用它们，并且您只有一个ID，那么将它们称为
hide（document.getElementById（'foo'））
。然而，在大多数情况下，如果您的代码结构正确，您应该已经有了实际的元素引用（而不是ID）。这很清楚，谢谢。Internet Explorer 9和早期版本中不支持的classList属性是否有其他选项？@Tim不再有人使用这些选项，它们已过时且不受支持。如果你的工作需要你支持他们，那就找一份新工作。否则，如果该元素没有任何其他类，只需使用
e.className='hide'
和
e.className=''
。