私は約100要素を持っていて、jqueryでアニメーションを作成しようとしています。どちらが速いですか？ - CSSプロパティを変更するかjqueryでクラスを追加する
<div class="box" id="a1"></div>
機能に基づいて各要素に特殊なスタイルを追加する必要があります。ブラウザに速くレンダリングされるそれらの
：
追加するCSSプロパティ
$(this).css({'background-color':'#000'})
または追加クラス
$(this).addClass("style1")
更新 少数のより多くの事は私が追加したい：
jsPerfによれば、addClassは約50％の速度で顕著に高速です。
はここでChromeのjsPerfデータをですが、私のテストでは、同じ使用のFirefoxについてでした：
$('#a1').css({ 'background-color': '#000' }) 82043±0.21パーセント48％ 遅く
$('#a1').addClass("style1") 158876±0。83％速い
ベンチマークのおかげで...スタイルシートのサイズとも比較する必要があります... 私はJavaScriptを使っていますが、私はスクリプトを自動化することができます。私は約25のクラスを追加する必要があります。 – Masade
jsPerfは、ある期間に実行できる操作量* js *のみをテストします。スタイルのレンダリングは考慮されていませんが、これはCSSメソッドによって高速になる可能性があります。 –
：
は、ブラウザに依存します。あなたが面白いのであれば、いくつかのテストを行うべきです。
とにかく重要ではないし、あなたのウェブサイトのボトルネックであることはほとんどありません。
マイクロ最適化を避けるには"早すぎる最適化はすべての悪の根源です"、時間を無駄にしています。
同意すると、特定の場合に最も効果的なものを使用してください。設定するプロパティが1つしかない場合は、 'css（）'を使用してください。そうでなければ、 'addClass（）'を使用してください。 – elclanrs
@gdoronは、私のchrome 16.0でレンダリングが非常に遅いと感じています。背景だけを追加する – Masade
@Masade。 100の要素がどんな減速も引き起こさない。 [this]（http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/）の記事を読んでください。これはCSSセレクタについてですが、同じ問題です。 – gdoron
これらの100要素すべての親にクラスを追加する方が高速で、そのクラスをCSSファイルまたはページで定義する方が早いでしょう。
.style1 .box{
//define style here
}
あなただけの唯一の要素のクラスを操作する必要があり、それは間違いなくcssメソッドを使用して、100要素のスタイルのそれぞれを修正するよりも高速である。この方法では。
どのくらい速いですか？すべての操作で実行されるコードの行数に依存します。これは、ブラウザとブラウザに依存します。
私のアプローチに従えば間違いなく速くなります。
スタイルタグの使用を検討することもできます。
非常に高速になる可能性があります。 たとえば、修正する要素がたくさんある場合は、100要素としましょう.CSSを1回書くだけで、DOMは1回だけ変更されます。
HTML：
<style type="text/css" id="specialStyle"></style>
<div class="oneHundredElements" id="box1"/>
<div class="oneHundredElements" id="box2"/>
...
<div class="oneHundredElements" id="box100"/>
SCRIPT：
<script>
var css = '.oneHundredElements {background-color:#000;}';
$('#specialStyle').html(css);
</script>
なぜベンチマークそれとは知りませんか？私はそれが問題に十分なものになるとは想像できません。 –
[**試してください。**]（http://jsperf.com/modifying-css-vs-adding-a-class） – icktoofay
どのような文脈で100の要素がありますか？ 1つの要素を使用し、jQueryの背景色アニメーション（http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor）を使用しないでください。 – Dan