最近、複数のクラス名と CSS 継承 (例: ) を使用する代わりに、非常に長い CSS クラス名を使用するモバイル UI キットに出くわしました".container-element-subelement"
。これにより、多くのパフォーマンスが向上しますか? これらのスタイルシートを後で維持しなければならないのは悪夢のように聞こえるからです。
2 に答える
答えは「はい」です。パフォーマンスに影響します。
ちょっとしたオプションのためだけに.cssフレームワークを使用する場合(すべてのjquery-uiをロードするなど、単一のdivで角を丸くするために...意味がありません。
また、.this-verry-long-way-too-long-css-selector-to-do-something{}と.thisselector{}を比較して、さらに深く理解してください。
- 45文字の違い=多くのバイトの違い、
- 長すぎるセレクター名の数を掛けて、
- .cssファイルがサーバーから送信された回数を掛ける =帯域幅
使用できるツールがあります:yslow'firefoxプラグイン'は、.cssのパフォーマンスの学習とtweekに役立ちます
編集:わかりました、私はあなたの質問を理解しています。次に、それはDOMエンジンに関連した良い質問です。
したがって、基本的な単純なセレクターをスタックすると、DOMエンジンのパフォーマンスが向上すると思います。
Chromeデベロッパーツールのセレクタープロファイラー([プロファイル]パネル内)を使用して、ブラウザーがページ内のセレクターを処理するのにかかる時間をプロファイリングできます(一致する要素にスタイルを一致させて適用します)。
ここにドキュメントがあります:http://moduscreate.com/efficient-dom-and-css/
続ける
参照した内容によるパフォーマンスの向上はごくわずかです(もちろん、ユーザーのハードウェア、ページサイズ、およびブラウザーによって異なります)。
ここでこれについていくつかの議論がありました:CSS子セレクターのパフォーマンスとクラスの肥大化