レンダリングのパフォーマンス：スタイル属性またはクラス名とスタイルシートのルール？

私はデータの視覚化を構築しており、レンダリングのパフォーマンスは非常に重要です。 JavaScriptを使用してSVGを使用しているにもかかわらず、私の質問は、ボグの標準HTMLに関連しています。レンダリングのパフォーマンス：スタイル属性またはクラス名とスタイルシートのルール？

OK、仮定のシナリオ：私は "red" のbackground-color 10,000 DOMノード、および "" のbackground-color 10,000 DOMノードを持っていると言います。各ノードは、JavaScriptループによって作成されます。私はどちらかの可能性：

ノードの background-colorを指定して、各ノードの style属性を設定

：<element style="background-color:red;"/>
は、各ノードでclass属性を設定し、インラインスタイルまたは外部スタイルシートでそのクラスを参照：

<head><style>.foo {background-color:red;}</style></head>

<body><element class="foo"/></body>

のダウンロードのコードはここで重要ではありません - 私はブラウザのレンダリングの性能にのみ興味があります。また、スタイル属性は通常、日々のウェブサイト開発ではそれほど有用でも意味もないことを認識していますが、ここでは具体的な使用例があります。

I だ論理的な答えに興味が、実際にこれをテストしたか（私は情報の検索が、これに特に何も見つからなかっました）他の誰かのテストについて読みました誰からも聞いて本当に便利になるだろう。

ありがとうございました！

出典

2010-11-22 Premasagar

あなた自身のベンチマークをやってみませんか？私は、異なるブラウザ間でパフォーマンスが大幅に変化すると思われます... –

私はそれが非常に特殊なケースだと思うし、さまざまなブラウザで自分自身をベンチマークする方がはるかに簡単です。私の賭けはそれほど違いはないが、誰が知っているかということです。 – Athari

私の推測では、 'style'ソリューションは最も速く動作するでしょうが、私は実際のベンチマークを調べることになります。あまりにも困難ではありません。ちょうど10,000個のモックオブジェクトを作成してください。 –

私は、このためのパフォーマンスのベンチマーク作成しました：それは約3クラス名を使用して要素を作成し、レンダリングするなど、高速倍ではなく、スタイル属性だように見え、FirefoxとChromeで最初のテストから http://jsperf.com/style-element-vs-attr

を。私はそれにはかなり驚きました - 私は確信していませんでしたが、その反対を期待していました。

出典

2011-05-23 12:05:39 Premasagar

私は、Java Scriptエンジンがグラフィックをレンダリングするのにかかる時間ではなく、完了までにかかる時間を測定しているだけなので、塩分が混入した統計を取ります。ブラウザは、通常、レンダリングフレームをとにかく調整します。したがって、JSPerfは100万回の操作を報告するかもしれませんが、ブラウザーは毎秒60フレームより速くレンダリングしないかもしれません。言い換えれば、ブラウザーは、ユーザーがとにかく気付かないために、多くのことがグラフィカルに行われている場合、それらをレンダリングするのではなく、高速で発生するイベントを破棄します。これはすべて、グラフィカルレンダリングでのperf結果の意味に影響します。 –

それは非常に公正なポイントです。 – Premasagar

私のテストでは、ブラウザープロファイラーを使用して、5000回の操作で結果は無視できましたが、属性を直接設定するのは、IEとChromeを使用したスタイル（直感的です）を使用するよりわずかに速いかもしれません。それは非科学的かつ決定的なテストでしたが、私はそれについていくつもりです。 –

私は非常に驚くかもしれませんが（もしそれがこれまで重要だったならばさらに驚いています）、それが1つあればそれはIEのベンチです。

あなたがテストしている条件が非常に端を発しているため、マークアップを悪用してインラインでのパフォーマンスが向上しない場合、パフォーマンス上のメリットが小さくなることはありません。クラスベースのCSSは、開発とメンテナンスとセマンティクスのためにはるかに優れています。インラインスタイルは絶対に避けてください。

出典

2010-11-22 11:32:14 annakata

多くのノードがある場合、私は 'クラス'と一緒に行くだろう。この場合、メモリの使用率は低くする必要がありますが、これは通常は良いことです。 –

@エリック：/コンサル - なぜスタイルが良くなるのか、なぜそれが悪いのかは考えられません。 – annakata

各ノードがJavaScriptループ内で作成されているとしたら、それは既にブラウザのパフォーマンス（JavaScriptエンジン）を要求していませんか？

どういうわけか、私はJavaScriptを使って色を設定する方がやや楽です。スクリプトが実行されているときに利用可能な計算されたスタイルをブラウザーで検索してから、色の変更をレンダリングまたは再レンダリングする必要があるクラスを追加するのではなく、$(this).css('color','red');となります。

私は完全に正しいかどうかわかりませんが、ただの意見です。

出典

2010-11-22 12:03:20

結果を比較し、私はCSS-で-JSのソリューションを使用するためのスティックだろう後、私は多くを試みたが、最終的にこのLIBを使用してきました：

https://github.com/cssobj/cssobj

それからCSSルールを作成し、更新していますJS、それはサイズが小さいです。

出典

2016-11-25 11:43:15

レンダリングのパフォーマンス：スタイル属性またはクラス名とスタイルシートのルール？

答えて

関連する問題