14

WebKit ブラウザーには、スタイル レンダリングの最適化手法が組み込まれているため、「ページ上の要素の約 60% についてスタイルを一致させる必要さえありません」。

ただし、「スタイルシートのどこかで兄弟セレクターが検出された場合、その最適化はページ全体で完全にオフになります...これには、+セレクターと および のようなセレクター:first-childが含まれ:last-childます。」

この最適化を無効にするセレクタータイプの完全なリストを知っている人はいますか?

--

より詳しい情報

  • 最適化については、ブラウザーの内部構造に関する Tali Garsiel の研究: How Browsers Workで説明されています。

  • 明らかにブラウザ コードを作成したDave Hyattからの兄弟セレクターに関する完全な引用は次のとおりです。これには、+ セレクターと、:first-child や :last-child などのセレクターが含まれます。

  • その引用は、 Hyattが 2005 年に書いた記事から来ているようです。以下で、彼はそれについてより詳細に説明しています (以前と同じソース)。

    要素に適用される一連の宣言を計算します. この最適化の実際の結果として、ページ上の要素の約 60% のスタイルを一致させる必要さえありません. 最適化の背後にあるアイデアは、ページ内の 2 つの要素がいつ移動するかを認識することです. DOM (およびその他の状態) 検査を通じて同じスタイルを保持し、可能な限りこれら 2 つの要素間でフロント エンドのスタイル情報を共有するだけです。」

  • Nate Koechley によるこの記事では、アルゴリズムについて詳しく説明しています。彼は次のようにまとめてい

    ます。ブラウザの根性を理解し、最良の方法を選択するのに役立ちます。」

  • ハイアットは、このW3C メーリング リスト アーカイブでも最適化について説明しました

  • また、Ryan Kinal からのスタック チャットでも簡単に取り上げられました。

私は特に知りたいと思っています：

  • 子セレクターも最適化をオフにするかどうか

  • Trident/IE が同様の最適化を使用しているかどうか

  • レンダリング パフォーマンスにどれほど大きな違いがあるかを示すテストが存在するかどうか

4

2 に答える 2

0

セレクタースタイルがロードに時間がかかる重いイメージになるまで、セレクターでそのような問題は見られませんでした。

css に組み込みの Web カラーが含まれている場合、セレクターの w3 仕様によると、どのような種類のセレクターでも問題に直面することはありません。

次のルールは、クラス セレクターを追加することを除いて、前の例のルールと似ています。したがって、特別なフォーマットは、H1 が class="opener" の場合にのみ発生します。

h1.opener + h2 { margin-top: -5mm }

SO ルールは標準化されていますが、Webkit ブラウザーにバグがあり、特定のセレクターの待機中に停止する必要があります。

于 2013-08-28T11:16:14.013 に答える