推奨チュートリアル: CSS ビデオ チュートリアル フロントエンド エンジニアの日常業務では、CSS 要素セレクターを使用するのが一般的です。コンパイルが必要な一般的な CSS または SASS、SCSS、LESS などを記述すると、それらは最終的に行ごとの CSS スタイル属性にコンパイルされ、最終的にはブラウザーによって解析されて適用されます。しかし、これなしでどうやってそれが可能になるか考えたことはありますか? ブラウザ レンダリング 最初にブラウザ レンダリングの手順を見てみましょう: CSS がブラウザによって読み込まれると、それを CSSOM ツリーに解析し、Dom でオーバーレイしてレンダリング ツリーを形成し、位置の計算やレンダリングなどの手順を実行します。この観点から見ると、CSS プロパティを適用する鍵は、CSS を CSSOM ツリーに変換する方法と、CSSOM を DOM に適用する方法にあります。 CSSOM ツリー CSS スタイルのセットを書き留めるとき、たとえば: #id .class h4 + p { ... } ブラウザがそれを解析すると、CSS は適切なものになると思うかもしれません。左から右の #id>.class>h4>p を見つけて、最後に適用しますが、実際にはブラウザがCSSを解析する順序は右から左です#p>h4>.class> #id 。 非常に直観に反しますね?ただし、パフォーマンスの問題を考慮すると、右から左への解析は左から右への解析よりもはるかに強力になります。 次のような HTML があるとします: ... ... ... ... そして、ここに 5 つの CSS スタイル ルールがあります: #p1 .c .d {} .f .c .d {} .a .c .e {} #p1 .f {} .c .d {}シミュレーションしてみましょう。CSS が左から右に解析される場合、次のような CSSOM ツリーが生成されます: ## から .d in 考えてみて、このような CSSOM ツリーにスタイルを適用するときは、all スタイル ルールをチェックして、そのスタイル ルールが .d に影響するかどうかを確認する必要があります。 .d には 3 つのスタイル ルールがあります: #p1 .c .d .f .c .d.c .d 同様に、DOM ツリー上の各要素は、取得する前にすべてのスタイル ルールを容易にする必要があります。個々のスタイルに依存すると、多くの冗長な計算が発生し、パフォーマンスに重大な影響を及ぼします。 逆に、前の CSS が右から左に解析される場合、CSSOM ツリーは次のようになります。 前の例と同じ、# から## .d から見ると、スタイルルールの影響を受ける対象要素はすべて第 1 層に集中しているため、 CSSOM ツリー全体を容易にする必要はなく、.d の下のサブ属性変数が実際の DOM 構造に準拠しているかどうかを確認し、一致するすべてのスタイル ルールを取得して .d# を完了するだけで済みます。 ##スタイル ルールを要素に適用します。 右から左への解析順序により、すべての共有ルール パスをまとめて収集できます。ブラウザが属性比較を実行するときに、CSSOM ツリー全体を容易にする必要がなくなり、無効な比較計算が大幅に削減されます。 別の方法で考えることもできます: HTML の構造では、要素は無数の子要素を持つことができますが、親要素は 1 つしか持つことができません。上）は間違いなく速いです。 スタイルの適用 CSSOM ツリーを解析した後、DOM と結合できますか?それが本当に簡単だったら素晴らしいでしょう。 開発者によって定義された CSS ファイルに加えて、画面のレンダリングに影響を与えるスタイル ルールを定義できる場所がいくつかあります: HTML インライン スタイル設定 ブラウザのデフォルト値 (つまり、CSS のリセット/正規化によって上書きされる値) ブラウザのユーザー設定設定 ブラウザは CSS 部分の処理を担当します。 CSS ファイルで定義されているものとスタイル ルールは、スタイル ルール、ターゲット属性、その他の情報を記録する個別のスタイル ルール グループ (CSS ルール セット) に編成されます。 ターゲット属性 後続の計算効率を向上させるために、ブラウザの CSS 処理カーネルは、ターゲット属性に従って個々のルールをグループ化し、スタイル ルール グループに保存します。ルールは次のように分類されます。合計4つのグループ idRulesclassRules tagNameRules universalRules このようにアクセスすると、ターゲット要素が存在するかどうかに基づいて指定できます。この属性により、適用される可能性のあるスタイルを迅速に除外できます。 ルールの適用 最後のステップはルールを適用することです。ブラウザは、すべてのスタイル ルールを次の順序とスタイル ルールの重みで適用します: ブラウザのデフォルト ブラウザのユーザー設定 開発者定義のCSS インライン スタイル !重要なスタイル属性を追加します #気になるかもしれません: なぜインライン スタイルと開発者定義の CSS が別々に処理されるのですか? ブラウザ レンダリングの手順を確認できます。inline style は DOM 要素に存在するため、CSS が DOM に適用されている場合にのみアクセスできます。この 2 つを組み合わせることはできませんあらかじめ組み合わせておいてください。 CSS 効率実際、ブラウザはここで最適化メカニズムを完了しており、ブラウザは一貫したステータスを持つ要素のスタイル スナップショットを自動的に取得します。一貫性のあるステータスとは、次の条件が満たされている必要があることを意味します。 ID が設定されていないタグとクラスが完全に一貫している必要がありますスタイル属性が設定されていませんset スタイル ルールではさまざまな兄弟セレクターを使用できません (例: ~、 、:first-child など) 上記の条件と前述の CSS 操作プロセスにより、CSS を記述する際に注意すべき箇所がいくつかあります。 スタイルのターゲット属性ルールはグループ、ID セレクターに保存されます。効率が非常に高いため、他の条件と混合することはできません。 CSS スタイル ルールをあまり深く記述しないでくださいインライン スタイルを使用できない場合は、使用しないでください。また、DOM 上に存在するため保守が困難です。事前に他のスタイルと組み合わせることはできないため、効率も大幅に低下します。 こうした典型的な細かい部分に注意を払うことができれば、CSS の効率は当然大幅に向上します。 拡張機能CSS セレクターについて理解すると、JavaScript 要素セレクターについてはどうなるのか、きっと興味が湧くはずです。この質問については jQuery のソースコードを参照してください。左から右に解析されます。なぜ異なるのかについては、実は記事の中に答えがあるので、考えて掘り下げることにします。 プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！
