DOMとはDocument Object Modelの略で、HTMLにおけるDIV要素、p要素など一般的な構成要素とその内容を指します。ブラウザではhtml等の記載に基づいてDOMツリーが生成されることになります。
DOMツリーはさらにCSS情報（CSSOMツリー）と組み合わされて、レンダーツリーが生成されます。レンダーツリーにおいては、DOMツリーの表示可能なノードごとに対応したCSSデータを組み合わせて、ノードの最終的な表示方法を決定します。
レンダーツリーにおいては、DOMツリーやCSSツリーで生成された情報のうち、表示しない扱いのノード等の情報が削除されます。
さらにレンダーツリーのオブジェクト毎に端末の現在の座標（フラットな状態で０．０）及びビューポートとの関係も再計算し、レイアウトとペインティング作業が繰り返され、ウェブページがブラウザに表示される仕組みになっています。レンダーツリーの生成まではHTMLやCSSの記述に基づいた絶対的な処理ですが、レイアウト以降の処理は、端末の現時点での座標及びビューポートに基づいた相対的な処理に移行していきます。
そのため、ブラウザにおいては、スクロールをするだけで、座標及びビューポートに変更が生じるため、レイアウトとペインティングの作業が必要となり、また、実際に処理が発生します。＃タグによるリンクもレンダーツリー内で座標を変更（当該要素の０．０に座標を再設定）することから、変更された座標を元にレイアウトおよびペインティング処理が行われサイトがクライアントコンピューターにレンダリングされると考えられます。
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ツリーひいてはレンダリングツリー生成の用に供されることになります。
コメント