6

私は多くの CSS パフォーマンスに関する記事を読んできました。

このようなセレクターが悪い理由がわかります

#social a {
}

ブラウザは最初にaを読み取るため、ページ内のすべての<a>タグを強制的にループします。

しかし、なぜa[title="home"]などのセレクターはclassを使用するよりも遅いのでしょうか?

ブラウザーは、特定のクラスを持つ要素を把握できるように、何らかのインデックスを作成すると思います (正しいですか?)。

しかし、ブラウザーは、どの要素が特定の属性を持っているかをインデックス化するべきではありませんか? (タイトルなど)?

私の質問は; a[title="home"]などのセレクターを使用すると、クラスを使用する場合と比較して 、CSS/要素のルックアップが遅くなるのはなぜですか? 結果が非常に遅くなるために、ブラウザーは何またはどのように動作しますか?

4

2 に答える 2

3

ブラウザの実装者は、最も一般的なケースを最適化します。クラスはスタイルを一致させるために非常に頻繁に使用されるため、これをできるだけ効率的に実装する必要があります。それらが CSS に読み込まれると、クラスにインデックスを付けてこれを可能にします。

のようなランダム セレクターtitle="home"はあまり使用されないため、より単純な検索を使用してそれらを実装することができます。めったに使用されないため、パフォーマンスへの影響はそれほど大きくありません。

要素には複数のクラス ( class="foo bar baz". ドキュメントを解析するとき、ブラウザーはこれを分割して、いずれかを CSS セレクターと照合できるようにする必要があります。

于 2013-08-30T09:22:30.533 に答える