Javascriptを：戻る2005年に.className変更の性能対.style変更

Question

、Quirksmode.comは、この記事をリリース：

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

そのを変更することで、要素のスタイルを変更することを「証拠」を示しました。クラス（すなわち、 "elem.className = x"）は、スタイルプロパティ（すなわち、 "elem.style.someStyle = x"）を介してスタイルを変更した場合の約2倍の速さであった。その記事の結果、私たちはclassNameベースのソリューションを使用して、私たちのサイト上の要素の表示/非表示を行いました。

問題は、私たちの開発者の一人が、この種のもの（つまり、 "$（something）.hide（）"のためにjQueryの同等のメソッドを使う方がはるかに多いと思います。 4年前に書かれた1つの記事しか見つからないので、私たちのclassNameベースの関数は使う価値があります。

この問題の最近の、またはより包括的な調査について知っている人はいますか？

Answer 1

There is a flaw in the benchmark that article uses。

私の個人的な経験では、classNameの更新がインラインスタイルの設定を上回る場合は見たことがありません。私はこれを具体的に証明していません（私は掘り下げようとしている記事を曖昧に覚えています）が、私は大規模なクライアントサイドアプリ（例えばgmailやGoogleマップ）がclassNamesにインラインスタイルを設定することを気に入っています。これらのアプリケーションの分析の文脈の中で私が最初にそうすることでスピードの増加を聞いた。

私はもう一方を推進していないことに注意してください.classNameを動的に設定することは、保守性/可読性の問題と分離の観点から遠くにあります。

Answer 2

いいえ、jQuery.hide（）は、スムーズなエフェクトで要素を非表示にすることができます。 classNameを変更することでこれを行うことはできません。

Answer 3

マイクロ最適化は悪です。私はあなたが真剣に大量の要素を一時的に隠していない限り、ミリ秒単位の違いは、今日の記事がまだまだ関連性がある場合は重要ではないと思います。

これを念頭に置いて、私はjQueryの方法をバトルテストとより簡潔なものにします。

Answer 4

私は、多くの理由でスタイル属性よりも上のクラスを使用することに慣れていますが、パフォーマンスは1つですが、一貫性は別のものです。

が合理的な権利だ

function toggle(element) { 
    element.style.display = element.style.display == 'none' ? 'block' : 'none'; 
} 

（またはjQueryの同等品）：私は、多くの場合、人のようなものを行う見てきましたか？たとえば、table-cell（ブロックではない）のデフォルトの表示値を持つ表要素に適用するまでです。クラスメソッド：

.hidden { display: none; } 
... 
function toggle(element) { 
    $(element).toggleClass("hidden"); 
} 

これはその他の理由ではるかに優れています。

しかし、hide（）のようなjQueryメソッドは例外です。彼らは正しく表示設定を処理し、あなたにアニメーションを与える。

Answer 5

あなたはクライアントコードについて話していますが、これはユーザーのブラウザで実行されるため、サーバーが読み込まれません。私はあなたのクライアント側でjavascriptを無視しますが、私は多くのCPUをクランチしていないと思います。

あなたの同僚がjQueryを使用することは、おそらく大きな影響を与えていないでしょうが、より読みやすいコードになります。だから私は彼が全く納得する必要はないと思う。

Answer 6

自分でテストしてください。 tester on the page you linkedがあります。ターゲットブラウザーでパフォーマンスをテストし、パフォーマンスに優れた最適な方法を判断します。

個人的には、パフォーマンスより読みやすさを選択します。また、潮も遅くなることがあります。クラスを使用する意味がある場合（つまり、多くの要素にスタイルを使用する場合）、クラスを使用することもできます。 CSSが要素のアニメーション用である場合は、styleを使用します。いずれの場合でも、（1）より一貫性があり、（2）より堅牢でテストされているので、jQueryの機能を優先します。

** Opera 10の場合、少なくとも速度は確実に向上しています。テストは、Opera 10の場合は5/12ms、Firefox 3の場合は57/88ms、Google Chromeの場合は14/36ms、IE7の場合は125/118ms（！）です。 IE7（おそらくあなたのターゲットブラウザ）はいずれかの速度がほぼ同じで、スタイルが少し変わっています！

早期最適化はすべての悪の根源です。

Answer 7

1秒間に何百もの要素が隠れていますか？そうでなければ、揚げる魚がもっと大きいと言いたい。さらに悪いことに、2005年に行われた調査では、最新のブラウザーのパフォーマンスについては何も言及していません。いいえIE7または8、いいえFirefox 3（外に2つだった？）、クロムなし。

しかし、あなたの同僚に従わせてもらいたい場合は、スタイルの代わりにクラスを使用する「hide（）」というプラグインを作成する必要があります。