著作権、知的財産権、IT法務など、コンテンツトラブルの解決・予防を重視する弁護士によるオウンドメディア お問合せは 03ー6915ー8682 か コンタクトフォーム をご利用ください。

  1. コンテンツ関連情報
  2. 4 view

ブラウザにおけるウェブサイトのレンダリング

DOMとはDocument Object Modelの略で、HTMLにおけるDIV要素、p要素など一般的な構成要素とその内容を指します。ブラウザではhtml等の記載に基づいてDOMツリーが生成されることになります。

DOMツリーはさらにCSS情報(CSSOMツリー)と組み合わされて、レンダーツリーが生成されます。レンダーツリーにおいては、DOMツリーの表示可能なノードごとに対応したCSSデータを組み合わせて、ノードの最終的な表示方法を決定します。

レンダーツリーにおいては、DOMツリーやCSSツリーで生成された情報のうち、表示しない扱いのノード等の情報が削除されます。

さらにレンダーツリーのオブジェクト毎に端末の現在の座標(フラットな状態で0.0)及びビューポートとの関係も再計算し、レイアウトとペインティング作業が繰り返され、ウェブページがブラウザに表示される仕組みになっています。レンダーツリーの生成まではHTMLやCSSの記述に基づいた絶対的な処理ですが、レイアウト以降の処理は、端末の現時点での座標及びビューポートに基づいた相対的な処理に移行していきます。

そのため、ブラウザにおいては、スクロールをするだけで、座標及びビューポートに変更が生じるため、レイアウトとペインティングの作業が必要となり、また、実際に処理が発生します。#タグによるリンクもレンダーツリー内で座標を変更(当該要素の0.0に座標を再設定)することから、変更された座標を元にレイアウトおよびペインティング処理が行われサイトがクライアントコンピューターにレンダリングされると考えられます。

Chrome、Safari、OperaはWebKit、FirefoxはGecko、IEはTridentをコアレンダリングエンジンとして採用しています。

HTMLの仕様も参考になります。

JAVASCRIPTや、PHPは、それぞれ、クライアントサイド、サーバーサイドでHTMLやCSSを動的に生成します。例えば、URLに記載された数値からDOMやCSSの内容をそれぞれ、クライアントサイド(JAVASCRIPT)あるいはサーバーサイド(PHP)で計算し、HTMLやCSSの内容を決定します。サーバーサイドでHTMLやCSSを書き出すPHP等においては、書き出されたHTMLやCSSが送信されクライアントサイドでDMOツリー、CSSOMツリーひいてはレンダリングツリー生成の用に供されることになります。

コンテンツ関連情報の最近記事

  1. 音楽家がJASRACを相手取って訴訟を提起

  2. タッチパネルにおけるジョイスティックを模した操作に関する特許侵害差止などで任天堂がコロプラ…

  3. 航空法改正によるドローン規制

  4. オリンピックエンブレム撤回問題

  5. ウェブでの簡単なアニメーション表現

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連サイト

オフィスサイト

I2練馬斉藤法律事務所リーガルグラフィック東京のオフィスサイトです。弊所の基幹サイトとなります。

一般法務サイト

コンテンツ法務以外の取り扱い法務を紹介する一般法務サイトです。

オリジナルストーリーサイト

I2練馬斉藤法律事務所リーガルグラフィック東京弁護士齋藤理央が制作するオリジナルストーリーサイトです。コンテンツ制作についても体験をとおして知見を有しているという弊所の特徴を体現するコンテンツであり、そのメイキング記事が当サイトのコンテンツ制作カテゴリの多くを占めるなど、当サイトとも密接に関係したコンテンツサイトとなっています。
PAGE TOP