CSSオブジェクトモデル（CSSOM）の初心者ガイド

多くのことが 最初のHTTPリクエスト そしてその 最終納入 Webページの。データ転送とブラウザのレンダリングパイプラインには、さまざまなテクノロジが必要です。 CSSオブジェクトモデル, または CSSOM.

CSSオブジェクトモデルはCSSコードを受け取り、すべてのセレクタをレンダリングします。 木構造に より簡単に解析するために。開発者がこの概念を完全に理解することは重要ではないかもしれませんが、もっと詳しく知りたい場合には検討する価値のあるトピックです。 ブラウザがコードを機能しているWebサイトにレンダリングする方法.

この記事では、CSSオブジェクト・モデルの基本について説明し、それがどのように機能するのかを説明します。.

CSSOMとは?

CSSオブジェクトモデルという用語は、 すべてのCSSセレクタと各セレクタに関連するプロパティのマップ. これらのスタイルは、ルート要素になることも、子をネストすることもできます.

CSSOMは非常によく似ています HTMLのDOM, これは、Document Object Modelを表します。両方ともの一部です クリティカルレンダリングパス これは一連のステップです。 ウェブサイトを正しくレンダリングする. これらすべてのプロセスが起こる 自動的に, 舞台裏.

では、なぜCSSOMは重要なのでしょうか。それはブラウザによって使用されるマップです。 CSSスタイルを正しくレンダリングする Webページに。コンピュータ内のすべての段落をコンピュータに伝える簡単な方法はありません。 .メインコンテンツ divは追加の行の高さを持つ必要があります.

解決策はCSSオブジェクトモデルです。 すべての要素とプロパティをマッピングします あなたのCSSコードから.

CSSOMにより、ブラウザはより簡単になります。 ページ上のスタイルをレンダリングする. 全体的に非常に技術的ですが、特にWebサイトを構築する場合は、プロセスについて少し理解する価値があります。.

使い方

DOMとCSSOMはどちらも すべてのWebブラウザで広く使用されている Webページを解釈してレンダリングするため。下の図は、Google Developers Web Fundamentalsガイドからのものです。 DOMはWebブラウザでレンダリングされます.

DOMとCSSOMの両方で、すべての情報は バイトからデジタルマップに変換 Webドキュメントのすべての要素をレンダリングします。プロセスは次のように機能します。

ブラウザ HTMLをダウンロードします Webページ用.
HTMLを処理している間、パーサーはlink要素にぶつかるかもしれません 外部スタイルシートを参照する.
このCSSスタイルシートは 地図に解析された CSSオブジェクトモデル仕様の使用.
結果のコードは次のようになります。 DOMの要素に適用される.

これらすべてが非常に早く起こり、そして起こります 1ページごとのリクエストで. 以下の他の図は、 CSSOMのツリー構造例.

ダイアグラム内のいくつかのプロパティが淡いグレーのフォント色を持っていることに注目してください。これらのプロパティは 親から継承. 本文は特定のフォントサイズを持っているので、それが上書きされない限り、本文内のすべての要素もそのフォントサイズを取得します。.

HTMLとCSSの文字列は トークンに変換 それはそれである場合もあります ノードとして理解 ブラウザで。これらのノードは ツリー構造内のオブジェクト ページ全体をどのように構成するかを定義します。.

CSSOMとDOMは完全に 別々のデータモデル, だから彼らは 互いに別々に解析された. しかし、彼らは両方とも持っています 同様の木構造, そして両方とも同じ目的を果たします：ページ上の異なる要素をレンダリングし識別するための構造をブラウザに与えること.

Web開発者がなぜ気にすべきか

すべてのレンダリング以来 バックエンドで起こる, CSSOMツリーについてあまり心配する必要はありません。しかし、それがどのように機能するのかを理解することは役に立つかもしれません.

覚えておくべきことの一つは CSSOMは完全にロードされていなければなりません Webページが表示される前に、ページ上のすべての要素がどのように見えるかを定義します。ページがCSSOMの前にロードされた場合、最初にプレーンHTMLとして表示され、その後数秒後にスタイルが表示されます。.

ブラウザは特にそれを避けます。なぜならそれはエンドユーザーにとって混乱を招くからです。そしてCSSOMは キャッシュできない;それは違いない 各ページに再作成.

実際のCSSファイルは、アセットをより速くロードするためにブラウザでページをレンダリングするためにキャッシュすることができます。 常にCSSOMパーサーを実行する必要があります. これはまた、JavaScriptがレンダリングとパフォーマンスに悪影響を及ぼす可能性があることも意味します。.

外部のCSS / JSリソースとそれらのロード時間についてもっと学ぶためにこの記事を読むことを強くお勧めします.

あなたのサイトを最適化する最善の方法は、 ナチュラルカスケード リソースの タンデムでロードされます.

CSSOMは技術的にはJS APIであるため、JavaScriptを使用してCSSOMを操作することは可能です。しかし、JavaScript DOM操作と比較してそれほど目的はありません。.

CSSOMについて学ぶ最大の理由は、Webサイトが実際にどのように機能するのかについて自分自身をさらに教育することです。.

インターネットを円滑に運営するために当然のことと思われることがたくさんあります。プロセス全体についてもう少し理解すると、全体がどのようにまとまっているのかを視覚化でき、World Wide Webの存在を理解できれば幸いです.

参考文献

このイントロがCSSオブジェクトモデルとは何か、そしてそれがWebページにどのように影響するかについてのしっかりとした考えをあなたに与えることができると思います。そこ CSSOMで操作することはそれほど多くない, そのためDOMとは少し異なります.

しかしながら、それはまだWeb開発において重要な技術であり、そしてそれはブラウザレンダリングの主要な側面を明確にするべきです。.

CSSOMについて、そしてそれがどのように機能するのかを論じる他の多くのリソースがあります。あなたがより多くを学ぶことを探しているなら、私がお勧めするいくつかの投稿があります：

CSSオブジェクトモデルの概要
CSSOMを探る：CSSオブジェクトアナライザの作成
すべてのフロントエンド開発者がWebページのレンダリングについて知っておくべきこと