18

特に、高速にレンダリングする必要があるかなり複雑なサイトで作業しているため、より効率的な CSS を作成する方法を学ぼうとしています。

私は HTML/CSS でこれをたくさん使うことに慣れています (主に読みやすさが好きだからです):

.spotlight {}
.spotlight ul {}
.spotlight ul li {}
.spotlight ul li a {color: #333;}

<div class="spotlight">
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</div>

ブラウザーは CSS ルールのマッチング プロセスを右から左に実行することを理解しました。つまり、<a>上記の最後の CSS ルールの要素がページ上のすべてのリンクに最初に一致するため、パフォーマンスが低下します。

したがって、私が収集したものから、ブラウザーに適したソリューションは、より具体的で、たとえば次のように使用することです。

.spotlight {}
.spotlight-link {color: #333;}

    <div class="spotlight">
      <ul>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
      </ul>
    </div>

(可能であれば継承を使用していると仮定しますが、ツリーの最後の要素に対して特定の制御が必要になることがよくあります)

私が疑問に思っているのは、ページ全体の要素にクラス名を出力することによる余分な HTML の肥大化が、ネストされた CSS 子セレクターを回避することによるパフォーマンスの向上を無効にしないのではないかということです。私は HTML を少なく書こうとすることに慣れていますが、この種のことはそれに反します。任意の洞察をいただければ幸いです。

4

2 に答える 2

12

あなたはそれを量る必要があります。すべてのアンカーにクラスを追加するのはばかげています。HTML の余分な肥大化により、節約されたレンダリング時間が大幅に相殺されます (蜂の足の 1/10,000 になります)。コードを維持するのがどれほど難しいかは言うまでもありません。

不必要に高価なセレクターの使用をやめる必要があるだけです。たとえば、

.spotlight ul li a

次のように書くことができます

.spotlight a

HTML の同じ要素に単一のクラスを指定し続ける場合 (2 番目の例のように)、代わりにタグ セレクターを使用する方がよいでしょう。

また、自分の時間とブラウザの時間を比較検討する必要があります。各ページの読み込みで数ナノ秒を節約するには、どれくらいの時間がかかりますか? 正直なところ、それは本当に価値がありません。

また、CSS 構造を HTML 構造に一致させると、CSS のポイントが無効になります。HTML が変更された場合は、CSS を変更する必要があります。したがって、セレクターはできるだけ具体的でないものにする必要があります。

しかし、ここには正解も不正解もありません。

于 2012-12-23T18:41:24.343 に答える