ブラウザの仕組み_html/css_WEB-ITnose

これは単なる研究の概要です。これは単なる学習のまとめです。これは単なる学習のまとめです。重要なことが 3 回述べられています。以下の内容はすべてインターネットからのものです。類似点があればコピーさせていただきます。) 「ブラウザの内部動作を学ぶことは、より多くの情報に基づいた意思決定を行い、ベストな開発手法を理解するのに役立ちます。その理由。」 ---Paul Irish

はじめに

1. ブラウザの主な機能

ブラウザの主な機能は、サーバーにリクエストを送信し、選択したネットワーク リソースをブラウザ ウィンドウに表示することです。 。ここで説明するリソースは通常 HTML ドキュメントを指しますが、PDF、画像、またはその他のタイプのリソースである場合もあります。リソースの場所は、ユーザーが URI (Uniform Resource Identifier) を使用して指定します。

ブラウザが HTML ファイルを解釈して表示する方法は、HTML および CSS の仕様で指定されています。これらの仕様は、Web 標準化団体 W3C (World Wide Web Consortium) によって維持されています。

長年にわたり、ブラウザーはこれらの仕様に完全に準拠しておらず、独自の拡張機能を開発しており、Web 開発者に深刻な互換性の問題を引き起こしてきました。現在、ほとんどのブラウザは多かれ少なかれ準拠しています。

ブラウザのユーザー インターフェイスには、次のような共通の要素が多数あります。

URL を入力するためのアドレス バー、
ブックマーク設定オプション。

• [更新] ボタンと [停止] ボタンで現在のドキュメントの読み込みを更新して停止します。

• ホーム ボタンでホームページに戻ります。

• 奇妙なことに、ブラウザのユーザー インターフェイスには正式な仕様はなく、長年にわたるベスト プラクティスの自然な進化とお互いの模倣です。また、HTML5 ではブラウザーに必須のユーザー インターフェイス要素は定義されていませんが、アドレス バー、ステータス バー、ツールバーなどのいくつかの一般的な要素がリストされています。もちろん、各ブラウザには、Firefox のダウンロード マネージャーなど、独自の機能がある場合もあります。
• 2. ブラウザの高レベル構造

ブラウザの主なコンポーネントは次のとおりです:

1.

ユーザー インターフェイス

- アドレス バー、進む/戻るボタン、ブックマーク メニューなど。メイン ブラウザ ウィンドウで要求したページの表示を除けば、表示の他のすべての部分はユーザー インターフェイスに属します。

2.

ブラウザ エンジン

- ユーザー インターフェイスとレンダリング エンジンの間で命令を送信します。

3. レンダリング エンジン

- 要求されたコンテンツの表示を担当します。要求されたコンテンツが HTML の場合、HTML および CSS コンテンツを解析し、解析されたコンテンツを画面に表示します。

4. ネットワーク

- HTTP リクエストなどのネットワーク呼び出しに使用されます。そのインターフェイスはプラットフォームに依存せず、すべてのプラットフォームに基盤となる実装を提供します。

5. ユーザー インターフェイス バックエンド

- コンボ ボックスやウィンドウなどの基本的なウィジェットを描画するために使用されます。プラットフォームに依存しない共通インターフェイスを公開し、下部でオペレーティング システムのユーザー インターフェイス メソッドを使用します

6. JavaScript インタープリター

- JavaScript コードを解析して実行するために使用されます。

7. データストレージ

- これは永続化レイヤーです。ブラウザは Cookie などのさまざまなデータをハード ドライブに保存する必要があります。新しい HTML 仕様 (HTML5) は、完全な (ただし軽量の) ブラウザ内データベースである「Web データベース」を定義しています。

写真: ブラウザの主要コンポーネント

ほとんどのブラウザとは異なり、Chrome ブラウザの各タブがレンダリング エンジン インスタンスに対応していることは注目に値します。各タブは独立したプロセスです。

レンダリング エンジン

レンダリング エンジンの役割: リクエストされたコンテンツをブラウザの画面に表示します

デフォルトでは、レンダリング エンジンは HTML および XML ドキュメントと画像を表示できます。プラグイン (またはブラウザ拡張機能) を通じて、他のタイプのコンテンツを表示することもできます。たとえば、PDF ビューア プラグインを使用すると、PDF ドキュメントを表示できます。ただし、この章では、CSS を使用してフォーマットされた HTML コンテンツと画像を表示するという主な用途に焦点を当てます。

1. プレゼンテーション エンジンの種類

この記事で説明するブラウザ (Firefox、Chrome、Safari) は 2 つのレンダリング エンジンに基づいて構築されています。 Firefox は、Mozilla の「自家製」レンダリング エンジンである Gecko を使用しています。 Safari ブラウザと Chrome ブラウザはどちらも WebKit を使用します。 WebKit は、もともと Linux プラットフォームで使用されていたオープン ソースのレンダリング エンジンで、後に Mac と Windows をサポートするために Apple によって変更されました。

2. メインプロセス

レンダリング エンジンは、最初にネットワーク層から要求されたドキュメントのコンテンツを取得します。コンテンツのサイズは通常 8000 ブロックに制限されます。

その後、次の基本プロセスに進みます:

図: レンダリング エンジンの基本プロセス

レンダリング エンジンは HTML ドキュメントの解析を開始し、各タグを「コンテンツ ツリー」上の DOM ノードに 1 つずつ変換します。外部 CSS ファイルおよびスタイル要素内のスタイル データも解析されます。 HTML の視覚的な指示を伴うこのスタイル情報は、別のツリー構造であるレンダリング ツリーを作成するために使用されます。

レンダリング ツリーには、色やサイズなどの視覚的なプロパティを持つ複数の四角形が含まれています。これらの長方形の配置順序が、画面上に表示される順序になります。

プレゼンテーション ツリーが構築された後、「レイアウト」処理段階に入ります。これは、各ノードに画面上で表示される正確な座標を割り当てることを意味します。次の段階は描画です。レンダリング エンジンはレンダリング ツリーを横断し、ユーザー インターフェイス バックエンド層が各ノードを描画します。

これは段階的なプロセスであることを強調しておく必要があります。より良いユーザー エクスペリエンスを実現するために、レンダリング エンジンはコンテンツをできるだけ早く画面に表示するよう努めます。レンダリング ツリーの構築とレイアウトの設定を開始する前に、HTML ドキュメント全体が解析されるまで待つ必要はありません。レンダリング エンジンは、コンテンツの一部を解析して表示すると同時に、残りのコンテンツをネットワークから受信して処理し続けます。

3. メインプロセスの例

写真: webkit のメインプロセス

写真: Mozilla のレンダリングエンジン Gecko のメインプロセス

上の図からわかるように、WebKit と Gecko で使用される用語は若干異なります。全体的なプロセスは基本的に同じです。 Gecko では、視覚的な書式設定要素のツリーを「フレーム ツリー」と呼んでいます。すべての要素がフレームです。 WebKit で使用される用語は「レンダー ツリー」であり、これは「レンダー オブジェクト」で構成されます。要素の配置について、WebKit では「レイアウト」という用語が使用されますが、Gecko ではそれを「リフロー」と呼びます。 WebKit では、DOM ノードと視覚情報を接続してレンダリング ツリーを作成するプロセスを「追加」という用語で使用します。セマンティックではない微妙な違いの 1 つは、Gecko には DOM 要素を生成するための HTML と DOM ツリーの間に「コンテンツ スロット」と呼ばれるレイヤーがあることです。プロセスの各部分について 1 つずつ説明します。

HTML 解析

1. 解析の概要

分析レンダリング エンジンの非常に重要なリンク。ドキュメントを解析するとは、ドキュメントを、コードが理解して使用できる意味のある構造に変換することを意味します。解析の結果は通常、文書構造を表すノード ツリーであり、これは解析ツリーまたは構文ツリーと呼ばれます。

文法

解析は、文書が従う文法規則 (文書が書かれている言語または形式) に基づいて行われます。解析できるすべての形式は、特定の文法 (語彙と文法規則で構成される) に対応している必要があります。これは文脈自由文法と呼ばれます。

パーサーと字句解析

解析プロセスは、字句分析と構文分析の 2 つのサブプロセスに分割できます。

字句分析は、入力を多数のトークンに分割するプロセスです。トークンは言語の単語であり、コンテンツを構成する単位です。

文法分析は、言語の文法規則を適用するプロセスです。

パーサーは通常、解析作業を次の 2 つのコンポーネントに分割します。入力コンテンツを有効なトークンに分解する役割を担う字句アナライザー (トークン ジェネレーターとも呼ばれる) と、入力コンテンツを次の形式に分解する役割を担うパーサーです。言語の文法規則に従って有効なトークンを取得し、文書の構造を分析して解析ツリーを構築します。字句アナライザーは、スペースや改行などの無関係な文字を分離する方法を知っています。

解析は反復的なプロセスです。通常、パーサーはレクサーに新しいトークンを要求し、それを何らかの文法規則と照合しようとします。一致するルールが見つかった場合、パーサーはそのトークンに対応するノードを解析ツリーに追加し、次のトークンの要求に進みます。

一致するルールがない場合、パーサーはトークンを内部に保存し、内部に保存されているすべてのトークンに一致するルールが見つかるまでトークンの要求を続けます。一致するルールが見つからない場合、パーサーは例外を発生させます。これは、ドキュメントが無効であり、構文エラーが含まれていることを意味します。

翻訳

多くの場合、解析ツリーはまだ最終製品ではありません。解析は通常、入力ドキュメントを別の形式に変換する翻訳中に使用されます。コンパイルはその一例です。コンパイラは、まずソース コードを解析ツリーに解析し、次に解析ツリーをマシン コード ドキュメントに変換することによって、ソース コードをマシン コードにコンパイルできます。

パーサーの種類

パーサーには、トップダウン パーサーとボトムアップ パーサーの 2 つの基本的なタイプがあります。直感的には、トップダウン パーサーは文法の高レベル構造から開始し、そこで一致する構造を見つけようとします。ボトムアップ パーサーは、低レベルのルールから開始し、高レベルのルールが満たされるまで、入力コンテンツを徐々に文法ルールに変換します。

(続く…)