6

MDNに記載されているように、ID ルールはクラス ルールよりも高速であり、タグ ルールはユニバーサル ルールよりも高速であることを認識しています。私の質問は、継承に関する 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 には 1 つのタグしかありませんが、何百ものp.article-text要素が存在する可能性があります。<body>タグが 1 つしかないので<body>、要素のスタイルを変更したとしても、スタイルがより効率的であるということ<h1>ですか? それとも.article-text、より具体的なセレクターを使用し、要素のスタイル変更について心配する必要がないため、要素のスタイルを設定する方が効率<h1>的ですか?

これはいつも疑問に思っていました。考え？

4

3 に答える 3

2

あなたが示した MDN の記事は有害な方法で書かれていると思います.CSS のマイクロ最適化に焦点を当てることを提案していますが、ほとんどの場合、ページの速度はさまざまな方法で向上させることができます (たとえば、Google ページの速度には興味深いヒントがあります)。

私の Web サイトで、CSS がボトルネックになった状況を思い出せません。一部のページの Chrome 開発者ツールで「タイムライン」を表示したい場合、スタイルの操作に費やされる時間は通常、他のイベントに比べて重要ではないことがわかります。

私がアドバイスをするなら、保守性を向上させるためにSASSやLESSのような CSS 前処理ツールを使用するほうがよいでしょう。これは最終的にルールの数を減らすのに役立つかもしれません。

于 2013-10-02T10:15:25.020 に答える
0

一番上の方がおそらく2つのうちで速いと思いますが、誰もが言っているように、ATMとデバイスと接続速度を備えたブラウザーで、40〜50を超える巨大なサイトがない限り、違いに気付かないでしょう.コードのスリム化を検討する必要があるページ

于 2013-10-02T10:00:37.920 に答える