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

问题描述

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

Back in 2005, Quirksmode.com released this article:

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

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

that showed "proof" that changing the style of an element by changing its class (ie. "elem.className = x") was almost twice as fast as changing its style via its style property (ie. "elem.style.someStyle = x"), except in Opera. As a result of that article, we started using a className-based solution to do things like showing/hiding elements on our site.

问题是，我们的一个开发人员更愿意使用 jQuery 的等效方法来处理这种事情(即$(something).hide()")，我很难说服他我们的基于className的函数值得使用，因为我只能找到四年前写的一篇文章.

The problem is, one of our developers would much rather use jQuery's equivalent methods for this kind of thing (ie. "$(something).hide()"), and I'm having a hard time convincing him that our className-based function is worth using, as I can only find a single article written four years ago.

有没有人知道关于这个问题的最新或更全面的调查?

Does anyone know of any more recent or more comprehensive investigations in to this issue?

推荐答案

有一个文章使用的基准存在缺陷.

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

In my personal experience I've never seen a case where updating a className outperforms inline style setting. I have no concrete proof of this (I do vaguely remember an article I'm going to try to dig up), but I have noticed that large clientside apps (for example gmail, or google maps) prefer setting inline styles to classNames, and it was in the context of analysis of these apps that I first heard of the speed increase in doing so.

请注意，我并不是在互相推荐:动态设置 className 在可维护性/可读性和分离关注点方面大有帮助.

Note that I am not promoting one over the other: setting the className dynamically goes a long way in terms of maintainability/readability and separating concerns.

这篇关于Javascript:.className 更改与 .style 更改的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！