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

【问题标题】：Which is faster? - modifying css property or adding class in jquery哪个更快？ - 修改 css 属性或在 jquery 中添加类
【发布时间】：2012-03-04 00:17:22
【问题描述】：

我有大约 100 个元素，我正在尝试使用 jquery 创建动画。

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

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

哪些在浏览器中渲染得更快：

添加 css 属性

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

或添加类

$(this).addClass("style1")

更新我还想补充几点：

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

【问题讨论】：

您为什么不对其进行基准测试并找出答案？我无法想象它会产生足够的影响。
Try it.
在什么情况下你有 100 个元素？为什么不使用一个元素并使用 jQuery 背景颜色动画 (stackoverflow.com/questions/190560/…)
想一想，添加类可以让您以后拥有更多功能
@tandu 你能帮我一些我也可以参考的工具吗.. 我不确定这些。

标签： javascript jquery performance optimization rendering

【解决方案1】：

哪些在浏览器中渲染得更快：

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

无论如何，它并不重要，也不太可能成为您网站的瓶颈。
避免微优化，“过早的优化是万恶之源”，你是在浪费时间。

【讨论】：

同意，在特定情况下使用最有效的方法。如果您只有一个要设置的属性，则使用css()，否则使用addClass()
@gdoron 就像我感觉它在我的 chrome 16.0 中渲染得非常慢，这就是我发布问题的原因......我需要添加的不仅仅是背景
@Masade。 100 个元素不会导致任何减速。阅读this 文章，虽然它是关于 CSS 选择器的，但它是同一个问题。

【解决方案2】：

根据jsPerf，addClass 明显快了大约 50%。

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

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

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

【讨论】：

感谢基准测试...我是否也需要将其与样式表的大小进行比较...当我使用 javascript 执行此操作时，我能够自动化脚本。对于 CSS，我需要添加大约 25 个类。
jsPerf 只测试一段时间内可以运行的操作 js 的数量。没有考虑到样式的渲染，用css方法可能会更快。

【解决方案3】：

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

.style1 .box{
   //define style here
}

这样你只需要操作一个元素的类，它肯定比使用css方法修改100个元素的样式要快。

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

如果你按照我的方法，肯定会更快。

【讨论】：

【解决方案4】：

你甚至可以考虑使用样式标签。

它可能会变得非常快。例如，如果你有很多元素要修改，比如说 100 个元素，那么你的 css 只写一次，DOM 只会改变一次。

HTML：

<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>

http://jsperf.com/foox/4

【讨论】：