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

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ツリーひいてはレンダリングツリー生成の用に供されることになります。

コメント

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

関連記事一覧

弁護士齋藤理央

東京弁護士会所属/今井関口法律事務所パートナー 弁護士
【経 歴】

写真(齋藤先生)_edited.jpg

大阪府豊中市出身

早稲田大学教育学部卒業

大阪大学法科大学院修了/最高裁判所司法研修所入所(大阪修習)

2010年    東京弁護士会登録(第63期)

2012年    西東京さいとう法律事務所(I2練馬斉藤法律事務所)開設

2021年    弁理士実務修習修了

2022年    今井関口法律事務所参画

【著 作】

『クリエイター必携ネットの権利トラブル解決の極意』(監修・秀和システム)

『マンガまるわかり著作権』(執筆・新星出版社)

『インラインリンクと著作権法上の論点』(執筆・法律実務研究35)

『コロナ下における米国プロバイダに対する発信者情報開示』(執筆・法律実務研究37)

『ファッションロー(オンデマンド生産と法的問題点)』(執筆・発明Theinvention118(6))

『スポーツ大会とスポーツウエアの法的論点』(執筆・発明Theinvention119(1))

『スポーツ大会にみるマーケティングと知的財産権保護の境界』(執筆・発明Theinvention119(2))

【セミナー・研修等】

『企業や商品等のロゴマーク、デザインと法的留意点』

『リツイート事件最高裁判決について』

『BL同人誌事件判決』

『インターネットと著作権』

『少額著作権訴訟と裁判所の選択』

『著作権と表現の自由について』

【主な取扱分野】

◆著作権法・著作権訴訟

◆インターネット法

◆知的財産権法

◆損害賠償

◆刑事弁護(知財事犯・サイバー犯罪)

【主な担当事件】

『リツイート事件』(最判令和2年7月21日等・民集74巻4号等)

『写真トリミング事件』(知財高判令和元年12月26日・金融商事判例1591号)

お問い合わせ

    TOP