Question

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

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

显示“证明”通过更改其类（即“elem.className = x”）来更改元素的样式几乎是通过其样式属性更改其样式的两倍（即“elem.style” .someStyle = x“），但在Opera中除外。作为该文章的结果，我们开始使用基于className的解决方案来执行在我们的网站上显示/隐藏元素的事情。

问题是，我们的开发人员之一宁愿使用jQuery的等效方法来处理这类事情（即“$（某事）.hide（）”），而且我很难说服他们基于className的函数值得使用，因为我只能找到四年前写的一篇文章。

有人知道有关此问题的最近或更全面的调查吗？

Answer 1

微观优化是邪恶的。我认为，除非你一下子隐藏了大量的元素，否则毫秒的差异是不重要的，如果这篇文章现在仍然具有相关性。

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

Answer 2

There is a flaw in the benchmark that article uses

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

请注意，我不是在推广另一个：动态设置className在可维护性/可读性和分离问题方面有很长的路要走。

Answer 3

虽然我普遍同意在样式属性上使用类的做法有很多原因。性能是一个，但一致性是另一个。我经常看到人们做的事情如下：

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

（或等效的jQuery）

似乎合理对吗？直到您将其应用于具有默认显示值的表元素，例如table-cell（not block）。类方法：

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

对于这个和其他原因来说要好得多。

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

Answer 4

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

就个人而言，我会选择可读性而非性能。此外，潮汐可能会稍后转变（如果它们还没有**）。如果使用一个类是有意义的（即你将样式用于许多元素），你也可以使用一个类。如果CSS用于元素上的动画，请使用style。对于其中任何一个，更喜欢jQuery的功能，因为它们（1）更一致，（2）更强大和测试。

**至少对于Opera 10来说，速度肯定有所改善。 Opera 10本地测试为5/12ms，Firefox 3为57/88ms，谷歌Chrome为14 / 36ms，IE7为125 / 118ms（！）。 IE7（也许是你的目标浏览器）的速度大致相同，风格略有变化！

过早优化是万恶之源。

Answer 5

你每秒隐藏数百个元素吗？如果没有，我会说有更大的鱼可以炒。更糟糕的是，2005年完成的一项研究没有说明现代浏览器的性能。没有IE7或8，没有Firefox 3（2甚至没有？），没有Chrome。

但是如果你坚持并希望你的同事也能效仿，你应该写一个jQuery插件，“hide（）”使用类而不是样式。

Answer 6

不，但我可以告诉你，jQuery.hide（）可以隐藏具有平滑效果的元素。这不能通过更改className来完成。

Answer 7

您正在谈论客户端代码，它在用户浏览器中运行，因此它不会加载您的服务器。我忽略了客户端的javascript，但我猜不是很多CPU。

你的coleague使用jQuery可能没有产生很大的影响，同时它会产生更易读的代码。因此，我认为他根本不需要被说服。

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

7 个答案: