継承に関するCSSのパフォーマンス

IDルールはクラスルールよりも高速ですが、MDNに記載されているように、汎用ルールより高速なタグルールより高速です。私の質問は、継承に関するCSSのパフォーマンスに関係しています。たとえば、次のうちどれが効率的ですか？継承に関するCSSのパフォーマンス

body { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 16px; 
} 

h1 { 
    font-family: Georgia, serif; 
    font-size: 36px; 
    font-weight: 700; 
}

又は

h1 { 
    font-family: Georgia, serif; 
    font-size: 36px; 
    font-weight: 700; 
} 

.article-text { 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 16px; 
}

つのみ<body>タグは、DOMであるが、p.article-text要素数百存在し得ます。 <body>タグが1つしかないので、要素を再レイアウトしていても、<body>スタイルが効率的です。または、より具体的なセレクタを使用するので、要素のリビルドについて心配する必要はないので、.article-text要素をスタイルする方が効率的ですか？

いつもこれが不思議です。思考？

出典

2013-07-20 Marcus McLean

ベンチマークを実行して調べますか？ – cimmanon

私はCSS（親要素から継承するスタイル）の "カスケード"が非常に効率的だと思います。これはセレクタを全く必要としません。私の理解では、 'body'は書類内のプレーンテキストの本体をスタイル通りにしたい、つまりそれがコンテナであることをスタイルに合わせるべきです。 –

ページパフォーマンスの壮大なスキームでは、[それは心配する価値はない]（http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/）（または少なくとも – steveax

あなたが示したMDN記事は、CSSマイクロ最適化に焦点を当てることを提案しているので、有害な方法で書かれていると思います。（例えば、Google Page Speedには興味深いヒントがあります）。

私のウェブサイトでは、CSSがボトルネックになっている状況を覚えていません。 Chromeデベロッパーツールでは、一部のページで「タイムライン」を見たい場合があります。また、スタイルの操作に費やされる時間は、他のイベントと比較して通常は重要ではありません。

私は助言を与えることだった場合、私はむしろ、他の道を行くと保守を改善するためにSASSまたはLESSのようなCSSの前処理ツールを使用すると思います。これは最終的にはルールの数を減らすのに役立ちます。

出典

2013-10-02 10:15:25

steveaxが述べたように。心配する価値はありません。さらに、答えは実際にブラウザと実際に与えられたHTMLに依存します。

出典

2013-07-20 18:52:21

私はATMとデバイスと接続を持っているブラウザで誰もが言っているように、2つのうちのほうが速いのですが、もっと多くのものがある巨大なサイトを持っていなければ、あなたのコードにスリムなライニングを施す必要があるときには40〜50ページ以上です

出典

2013-10-02 10:00:37 Pazrat

継承に関するCSSのパフォーマンス

答えて

関連する問題