Javascript：.className 更改与 .style 更改的性能答案

【问题标题】：Javascript: Performance of .className Changes vs. .style ChangesJavascript：.className 更改与 .style 更改的性能
【发布时间】：2009-03-28 23:04:59
【问题描述】：

早在 2005 年，Quirksmode.com 就发布了这篇文章：

http://www.quirksmode.org/dom/classchange.html

这表明“证明”通过更改元素的类（即“elem.className = x”）来更改元素的样式几乎是通过其样式属性更改其样式（即“elem.style”）的两倍.someStyle = x")，Opera 除外。由于那篇文章，我们开始使用基于 className 的解决方案来执行诸如在我们的网站上显示/隐藏元素之类的操作。

问题是，我们的一位开发人员更愿意使用 jQuery 的等效方法来处理这种事情（即“$(something).hide()”），我很难让他相信我们的基于类名的函数值得使用，因为我只能找到一篇四年前写的文章。

有没有人知道对此问题有更近期或更全面的调查？

【问题讨论】：

“过早/微优化糟透了”既然每个人都这么说，让我澄清一下：我 100% 同意，但我们首先开始使用类与样式，因为这有助于实现真正的性能问题。当然，那是几年前的事了，可能不再相关，但它并不“为时过早”。
虽然我真的很欣赏这些回复，但我正在寻找的不仅仅是“使用 jQuery：它已经过测试，因此必须是最好的解决方案”（这基本上是迄今为止回复的信息） .因此，至少在目前，我将把这个问题留作“未回答”。

标签： javascript performance

【解决方案1】：

微优化是邪恶的。我认为，除非您一次隐藏大量元素或其他内容，否则如果这篇文章现在仍然相关，那么以毫秒为单位的差异并不重要。

考虑到这一点，我会使用 jQuery 的方法，因为它们经过了实战测试并且更简洁。

【讨论】：

【解决方案2】：

There is a flaw in the benchmark that article uses.

根据我的个人经验，我从未见过更新类名优于内联样式设置的情况。我没有具体的证据证明这一点（我确实模糊地记得我将尝试挖掘的一篇文章），但我注意到大型客户端应用程序（例如 gmail 或 google maps）更喜欢将内联样式设置为 classNames，并且正是在分析这些应用程序的背景下，我才第一次听说这样做的速度有所提高。

请注意，我并不是在推广另一个：动态设置 className 在可维护性/可读性和分离关注点方面大有帮助。

【讨论】：

【解决方案3】：

虽然出于多种原因，我通常同意使用类而不是样式属性的做法。性能是一个，但一致性是另一个。我经常看到人们这样做：

function toggle(element) {
  element.style.display = element.style.display == 'none' ? 'block' : 'none';
}

（或 jQuery 等价物）

看起来很合理吧？直到您将其应用于具有默认显示值的表格元素，例如表格单元格（不是块）。类方法：

.hidden { display: none; }
...
function toggle(element) {
  $(element).toggleClass("hidden");
}

由于这个和其他原因，好多了。

但是像 hide() 这样的 jQuery 方法是一个例外。他们正确处理显示设置并为您提供动画。

【讨论】：

请注意...？ '' ： '没有';将在您的示例中正常工作。
不，它不会，虽然它可能看起来。 TD 的默认显示属性是“table-cell”，而不是“block”，因此如果您使用该代码，您最终会（基本上）对浏览器说“这个 TD 不再是 TD，它现在是块级元素，如 DIV";这将对它的渲染产生（微妙的）影响。
事实证明有一种方法可以做到这一点：只需将 'none' 更改为 ''。换句话说 anyELement.style.display = '' 应该将 anyElement 设置回其原始显示值。

【解决方案4】：

自己测试一下。有一个tester on the page you linked。在目标浏览器上测试性能，以确定性能方面的最佳使用方法。

就个人而言，我会选择可读性而不是性能。此外，潮汐可能会在以后转向（如果还没有的话**）。如果使用类是有意义的（即，您将样式用于许多元素），那么您不妨使用类。如果 CSS 用于元素上的动画，请使用 style。无论哪种方式，都更喜欢 jQuery 的函数，因为它们 (1) 更一致，(2) 更健壮且经过测试。

**至少对于 Opera 10，速度确实有所提高。 Opera 10 本地测试为 5/12ms，Firefox 3 为 57/88ms，Google Chrome 为 14/36ms，IE7 为 125/118ms (!)。 IE7（可能是您的目标浏览器）两者的速度大致相同，只是样式略有变化！

过早的优化是万恶之源。

【讨论】：

A) 我对该基准的方法没有 100% 的信心 B) 我（理想情况下）正在寻找对“真正”性能优势的更全面评估，而不仅仅是对单个 JS 操作（就像这里的许多操作一样，我的同事也高呼“微优化 == 邪恶”;-)）

【解决方案5】：

您是否每秒隐藏数百个元素？如果没有，我会说有更大的鱼要炸。更糟糕的是，2005 年进行的一项研究没有说明现代浏览器的性能。没有 IE7 或 8，没有 Firefox 3（甚至没有 2？），没有 Chrome。

但是如果你坚持并希望你的同事效仿，你应该编写一个 jQuery 插件，其中“hide()”使用类而不是样式。

【讨论】：

我知道 2005 年的研究并没有太大帮助……这就是这个问题的全部意义；-) 至于插件的想法，我完全同意；如果我们继续为此使用类，我们几乎肯定会制作一个 jQuery 插件（我们之前已经有一个内部函数）。
P.S.虽然我不认为我们隐藏了“每秒数百个元素”，但过去我们确实在页面上遇到了非常现实的性能问题，并且切换到基于类的显示/隐藏确实对其产生了重大影响（这是为什么我们首先开始使用它）。

【解决方案6】：

不，但我可以告诉你，jQuery.hide() 可以隐藏一个元素，效果很平滑。这不能通过更改类名来完成。

【讨论】：

是的，可以通过更改类名来完成...只需为类名设置动画即可。当然，这更难......

【解决方案7】：

您在谈论客户端代码，它在用户浏览器中运行，因此不会加载您的服务器。我忽略了您客户端的javascript，但我想并没有占用太多CPU。

您的同事使用 jQuery 可能不会产生很大的影响，但它会产生更易读的代码。所以我认为他根本不需要被说服。

【讨论】：