Developersこちらのサイトをまとめてみました。リンク先の画像、ソースコードを使用しています。オブジェクトモデルの構築ウェブページをレンダリング(描画)する前に、ブラウザはDOMとCSSOMの構築を行います。(CSSOM)に変換されます。DOMとCSSOMは独立したデータ構造です。TimelimeでDOMとCSSOMの構造と処理コストを見ることができます。</body></html>シンプルなケースで考えてみましょう。ブラウザがこのページを処理するのに必要なことはなんでしょうか。ブラウザはHTMLの生のバイト(Bytes)を読み取って特定のエンコーディング(UTF-8等)に沿ってキャラクター(characters)に変換します。<body>といったトークン(tokens)に変換します。これらのトークンはノード(Nodes)と呼ばれるオブジェクトに変換されます。最後にノードは互いの相関関係を定義され、データストラクチャツリーに組み込まれます。これが、DOMと呼ばれる構造です。ブラウザがHTMLマークアップをプロセスするときには必ずこれらの手順を踏みます。Toolsを開くと、このプロセスにかかった時間を見ることができます。上の例では、HTMLバイトのチャンク(かたまり)をDOMツリーに変換するのに5msかかっています。ページが大きくなればなるほど、この処理にかかる時間も長くなります。DOMツリーの準備ができました。ページを描画するのにDOMだけで十分でしょうか?DOMツリーはドキュメントマークアップのプロパティや相関関係を教えてくれますが、それらのエレメントが描画された時、どのように見えるのかはわかりません。(CSSOM)ブラウザは、DOMの構築とともに<head>セクションの中の外部CSSスタイルシートを参照するリンクを読み込みます。}もちろんHTMLマークアップのインラインとして直接記述することもできますが、HTMLとCSSの独立させておくことで、コンテンツとデザインを分けて考えることができます。することで、デザイナーはCSS、開発者はHTMLに集中することができるのです。HTMLと同じように、CSSもブラウザが読み取れる形にコンバートしてあげる必要があります。CSSのバイトはキャラクター、トークン、ノードへと変換され、そして最後にツリーストラクチャに関連付けられます。(CSSOM)と呼ばれるものです。CSSOMはこうしたツリー構造を持つのでしょうか。ブラウザはノードに適用することができる最も全体的なルールの描画をまず行います。ノードがbodyエレメントの子なら、すべてのbodyスタイルが適応されます。それから、ブラウザはより細かいルールを適応します。down"と呼びます。具体的に見ていきましょう。上記のCSSOMツリーでは、bodyエレメント内のspanタグに囲まれたテクストは、フォントサイズが16pxで赤色です。フォントサイズに関する定義はbodyからspanへと連続的に伝達されています。spanタグがpタグの子ならば、コンテンツは表示されません。styles"と呼ばれるデフォルトのスタイルセットを持ちます。スタイルを設定しない時はこれが適応されますし、開発者はこのデフォルトセットの上にスタイルを記述していくことになります。CSSの処理にはどのくらいの時間がかかるのでしょうか。Style"イベントに記録されています。CSS"エントリがありません。代わりに、CSSOMツリーの構造と解析、それにこのイベント下の再帰的な計算結果を表示します。例のスタイルシートは処理に0.6msほどかかり、8つのエレメントにスタイルを反映しています。(2)@uraway_さんのツイートはてなブログをはじめよう!urawayさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。