Javascript 哪个更快在jquery中修改css属性或添加类

我在like中有大约100个元素，我正在尝试用jquery创建一个动画

<div class="box" id="a1"></div>

或者添加类

$(this).addClass("style1")

已更新 我想补充几点：

• 现在它有100个元素，我用jquery添加它们
• 要创建随机性，我需要创建大约25种样式——我是通过javascript实现的
• 我是否也应该将样式表的大小添加到相同的样式表中，以获得精确的基准

以下哪项在浏览器中渲染得更快：

取决于浏览器。如果你感兴趣的话，你应该做一些测试

无论如何，这并不重要，也不太可能成为网站的瓶颈。

---

避免微优化，“过早优化是万恶之源”，这是在浪费时间。

向所有这100个元素的父元素添加一个类将更快，并在css文件或页面中定义该类

.style1 .box{
   //define style here
}

这样，您只需操作一个元素的类，它肯定比使用

css

方法修改100个元素的每个样式都要快

多快？这完全取决于每个操作中执行的代码行数，而每个操作又取决于浏览器到浏览器

如果你采用我的方法，它肯定会更快。

根据，addClass的速度明显快了50%

以下是Chrome的jsPerf数据，但在我的测试中，使用Firefox时的数据大致相同：

82043±0.21%48%
慢的

 <代码> $'（'AyA1）。addClass（“SytL1”）< /代码> 158876±0.83%最快
 < p>您甚至可以考虑使用样式标签。

它可能会变得非常快。
例如，如果您有很多元素需要修改，比如说100个元素，那么当您只编写一次css时，DOM将只更改一次

HTML:


...

脚本：

<script>
    var css = '.oneHundredElements {background-color:#000;}';
    $('#specialStyle').html(css);
</script>


var css='.onehunderements{背景色：#000；}'；
$（'#specialStyle'）.html（css）；

为什么不对其进行基准测试并找出答案？我无法想象这会产生足够的影响。在什么情况下你有100个元素？为什么不使用一个元素并使用jQuery背景色动画（）呢later@tandu你能帮我拿一些工具吗，我也可以参考一下。。我不确定这些。同意，在特定情况下使用最有效的方法。如果您只需要设置一个属性，那么请使用
css（）
，否则请使用
addClass（）
@gdoron，就像我在Chrome16.0中感觉到它的渲染速度非常慢一样，这就是我发布此问题的原因。。。我需要补充的不仅仅是background@Masade. 100个元素不会导致任何减速。阅读这篇文章，虽然它是关于css选择器的，但它是相同的问题。感谢您提供的基准测试。。。我是否也需要将其与样式表的大小进行比较。。。当我使用javascript时，我能够自动执行脚本。对于css，我需要添加大约25个类。jsPerf只测试js在一段时间内可以运行的操作量。它没有考虑样式的呈现，css方法可能会更快。
<style type="text/css" id="specialStyle"></style>
<div class="oneHundredElements" id="box1"/>
<div class="oneHundredElements" id="box2"/>
...
<div class="oneHundredElements" id="box100"/>

<script>
    var css = '.oneHundredElements {background-color:#000;}';
    $('#specialStyle').html(css);
</script>