3

私が特に疑問に思っている*:afterのは、リソースに関してどれだけ高価になるかということです。この場合、疑似要素はキーセレクターになりますか? それとも、クライアントはとにかくすべての要素を取得しますか?

言い換えれば、*:afterと*パフォーマンスの違いは何ですか?

【編集しました。愚かな例。悪い。]

明確にするために、css のみを使用して sth を描画しようとしていますが、多くの疑似要素を使用していることに気付きました。書くことで時間を節約できるかどうか、たださまよいます

*:after, 
*:before {
   content:'';
}

とその資源コスト。

ありがとう。

4

2 に答える 2

4

この場合、疑似要素はキーセレクターになりますか?

技術的には、セレクターのサブジェクト*は です。つまり、一致する要素が*疑似要素を生成する要素になります。

「キーセレクター」という用語は、疑似要素に関しては明確に定義されていません。さらに、サブジェクトセレクターの概念とは異なり、実際には実装の詳細です。「キーセレクター」が「レンダリングされるボックスを表すセレクター」を意味する場合、疑似要素はキーセレクターであると言えます。ただし、私は実装者ではないため、実装の詳細については詳しくありません。

いずれにせよ、クライアントが DOM を通り抜け、選択したすべての要素について次のようになると想定しても問題ありません。

  1. ここでは疑似要素 (この場合は ) を無視して、要素をセレクターと一致させようとし*ます。

  2. 要素がセレクターと一致する場合、該当する場合 (いくつかの要素は疑似要素を生成できません)、この要素のボックスの子として疑似要素ボックスを作成しようとします (:beforeおよびのような生成された疑似要素の:after場合)。

  3. 疑似要素ボックスにスタイルを適用し、他のボックスと同じようにレンダリングします。

2 つのセレクターの違いは、前者には疑似要素が含まれているのに対し、後者には含まれていないことです。それらは根本的に異なることを行うため、パフォーマンスで比較するのは公平ではありません。ただし、どちらも同じキャッチオール セレクターを使用するため、どちらも DOM 内の任意の要素と一致させようとします。*そのため、特別な最適化を行わない限り、それに伴う唯一のオーバーヘッドは*:after、疑似エレメント。

パフォーマンスのトピックについて話しているので、*基本的に保証された一致であるため、要素の一致はほぼ瞬時に行われることを覚えておいてください。より複雑なセレクターと組み合わせた場合にのみ、セレクター レベルでよりコストがかかります。最終的には、そのパフォーマンスは DOM にある要素の数に応じて最大にスケーリングされますが、実際にスタイルをレンダリングするほど高価ではありません。何千もの要素がない限り。

ユースケースに関しては、私の意見では、通常、すべての要素に対して疑似要素を作成する必要はありません。CSS で何かを描画している場合は、コンテキストによってセレクターを制限できるかどうかを確認してください。たとえば、特定の ID を持つ要素内でのみ描画している場合など、DOM 全体で不要なボックスをレンダリングしないようにします。

#mycanvas *:after, 
#mycanvas *:before {
   content:'';
}
于 2013-09-03T08:25:44.803 に答える
3

質問の編集後

ここで質問しようとしていることの明確な画像を得たので、 を使用する*と、とにかく要素が選択されますが、すべての要素が選択されるため正確ではありません..必要に応じて、次のようなものを使用できます

.container *:not(span) {
   color: red;
}

または（ただし、以下のものは、内部にネストされたすべての要素を選択します.container）

.container * {
   color: red;
}

デモ

質問編集前

ここで何を尋ねているのか理解できませんが、両方のセレクターは完全*:afterに異なります..それらは異なる目的で使用されます.質問のタイプミスかどうかはわかりませんがcontent、埋め込み:beforeまたは:after.

たとえば、

*:after {
    content: " <";
}

デモ

そして、これを使用すると* .after、クラスを持つ要素が選択されます.after

* .after {
    color: red;
}

デモ 2

最適化に関する限り、一般的な Web サイトを使用することが大きなパフォーマンスの問題になるとは思いません。*以下のようなプロパティを保持するセレクターをよく使用します。

* {
   margin: 0;
   padding: 0;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

また、最後になりましたが、for each 要素*:afterを使用して一部のコンテンツを埋め込まないため、使用する理由が見つかりません。:after

于 2013-09-03T08:13:43.920 に答える