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

Question

我有大约100个元素,我试图用jquery创建一个动画.

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

我需要根据函数为每个元素添加特殊样式.

其中哪些在浏览器中呈现得更快:

添加css属性

$(this).css({'background-color':'#000'})

或者添加课程

$(this).addClass("style1")

更新 了我想添加的更多内容:

• 现在它有100个元素,并通过jquery添加它们.
• 要创建随机性,我需要创建大约25种样式 - 我正在通过javascript进行
• 我是否也应该将样式表的大小添加到相同的位置以获得准确的基准.

Answer 1

其中哪些在浏览器中呈现得更快:

取决于浏览器.如果它很有趣,你应该做一些测试.

无论如何,它并不重要,也不太可能成为您网站的瓶颈.
避免微观优化,"过早优化是所有邪恶的根源",你在浪费你的时间.

Answer 2

根据jsPerf,addClass明显快了大约50%.

这是Chrome的jsPerf数据,但在我的测试中使用Firefox大致相同:

$('#a1').css({ 'background-color': '#000' }) 82,043±0.21%慢48%

$('#a1').addClass("style1") 最快158,876±0.83%