web-dev-qa-db-ja.com

ユニバーサルセレクターのパフォーマンスへの影響は何ですか？

毎月数百万のページビューを受け取るページで、クライアント側の簡単なパフォーマンスの調整を見つけようとしています。私が懸念していることの1つは、CSSユニバーサルセレクター（*）の使用です。

例として、次のような非常に単純なHTMLドキュメントについて考えてみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Example</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

ユニバーサルセレクターは、上記の宣言をbody、h1、およびp要素に適用します。これは、これらがドキュメント内の唯一の要素であるためです。

一般に、次のようなルールからパフォーマンスが向上します。

body, h1, p {
  margin: 0;
  padding: 0;
}

それとも、これはまったく同じ正味の効果をもたらしますか？

ユニバーサルセレクターは、私が気付いていない可能性のあるより多くの作業を実行しますか？

この例のパフォーマンスへの影響は非常に小さい可能性があることを認識していますが、実際の状況でより大幅なパフォーマンスの向上につながる可能性のあることを学びたいと思っています。

ユニバーサルセレクタールールのスタイルを、ドキュメントの後半にある他のスタイルでオーバーライドするつもりはありません。つまり、すばやくダーティなリセットスタイルシートとして使用します。私は実際に、意図したとおりにユニバーサルセレクターを使用しようとしています。つまり、ドキュメント内のすべての要素にルールセットを一度に適用することです。

最終的には、ユニバーサルセレクターに本質的に遅いものがあるのか​​、それとも誤用が横行しているためにラップが悪いだけなのかを判断したいと思っています。 * { margin: 0; }が文字通りbody, h1, p { margin: 0; }と同等である場合、それは私の質問に答えます。より簡潔なので、前者を使用することを知っています。そうでない場合は、ユニバーサルセレクターのパフォーマンスが遅い理由を理解したいと思います。

htmlcssperformancecss-selectors
42
Bungle

最新のブラウザでは、すべての要素にスローエフェクト（ボックスシャドウ、z軸回転など）を適用しない限り、パフォーマンスへの影響はごくわずかです。ユニバーサルセレクターが遅いという神話は、10年前の遅い時代からの二日酔いです。

参照： http://www.kendoui.c​​om/blogs/teamblog/posts/12-09-28/css_tip_star_selector_not_that_bad.aspx

61
mxcl

ワイルドカードがパフォーマンスに影響を与えることは理解していますが、小規模なサイトでは影響はごくわずかです。ワイルドカードは、プログレッシブエンハンスメントに基づいてサイトを構築するための非常に便利なツールです。明らかに、HTML *のようなものを使用すると、大規模なサイトのパフォーマンスに実際に影響しますが、のように具体的にします。 #element_id *は、子要素に普遍的な変更をすばやく加えるのに役立ちます。

結局のところ、ワイルドカードには理由があります。使用しないよりも使用する方が有益であることを理解する必要があります。それは文脈に依存します。

CSSテンプレートを作成するときは、ワイルドカードと汎用セレクターを使用します。また、カスタムスタイルを使用して、なじみのないWordPressテーマ内の要素の範囲をすばやく調整するための優れた方法でもあります。

人気があり合理化されているBootstrapでさえ、適切な状況下でワイルドカードを使用します。

参照：

  • http://getbootstrap.com/css/
  • Gustafson、A。2015.アダプティブWebデザイン：プログレッシブエンハンスメントによる豊富なエクスペリエンスの作成。バークレー、（CA）：新しいライダー。
2
Adobe-Wan Kenobi

汎用セレクターを回避すると、常にページのレンダリングが高速化されます。ワイルドカード*は、特にページが複雑なネストになり、要素数が急増する場合は遅くなります。

IDは、可能な限り低いレベルまで常に指定する必要があります（特に、データベースの結果などを処理する場合、これはほぼ不可能になると思います）。しかし、あなたがのようなセレクターを使うとき

.mysuperclass ul li p a

クラスの後に4つの汎用セレクターが続きます。つまり、.mysuperclassの各要素について、レンダリングエンジンは、これらのルールを探して、その親のすべての要素をループする必要があります。

要するに、私の答えは、CSSをできるだけ具体的にし、セレクターを使用してDOMに可能な限りドリルダウンすることです。ワイルドカードやジェネリックは避けてください。

0
Jarrod Nettles