Webの基本

エクスプローラ

ブラウザの主な機能

ブラウザの主な機能
ユーザーが選択したリソースをサーバに要求し、ブラウザに表示します.
リソースにはHTMLドキュメント、PDF、画像などがあります.
ブラウザは、Web標準化組織(W 3 C/World Wide Web Consortium)で定義された説明に従ってHTMLファイルを解釈して表示します.(従来とは異なり、ほとんどのブラウザが基準を満たしています.)
ブラウザのUI
ブラウザのユーザーインタフェースは通常

Uniform Resource Identrifier/リソースのアドレスを入力するアドレスバー

前のボタンと次のボタン

ブックマーク

現在のドキュメントのロードを停止するには、[更新](Refresh)ボタンと[停止](Stop)ボタンを使用します.

ホームボタン
持つ要素.

HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다.

ブラウザの基本構造

ブラウザのコンポーネント

ユーザインタフェース(UI):アドレスバー、前/次ボタン、ブックマークメニューなどの要求ページ画面を除くすべての残りの部分.ブラウザとユーザーが対話できる接触点.

ブラウザエンジン:ユーザーインタフェースとレンダリングエンジンの動作を制御します.ユーザーが[アドレス](Address)ウィンドウに要求すると、ブラウザはレンダリングエンジンを制御して応答を取得します.

レンダリングエンジン:ユーザ要求をペイントするために使用されるサイトの内容を表示します.HTMLとCSSブロックを画面に表示します.(Webkit、Gecko、異なるブラウザで異なるエンジンを使用)->フロントエンドに重要!

通信:HTTP要求と同じネットワークコール.インターネットからリソースをインポートするために使用します.

UIバックエンド:コンボボックスやウィンドウウィンドウなどの基本的な内蔵UIを描画します.ブラウザは複数のオペレーティングシステム上で作成され、これらのオペレーティングシステムのAPIを使用することができるため、MacとWindowのデフォルトのブラウザUIはそれぞれ異なる.

JavaScriptインタプリタ:Javascriptインタプリタ.javascript翻訳機を使用してjavascriptコードを解釈および実行します.

リポジトリ:リポジトリのストレージ層.Cookie、キャッシュ、サービスキット、ローカルストレージなど、すべてのデータを格納します.

レンダーエンジン(Render Engine)

ログインエンジン
レンダリングエンジンは、要求されたコンテンツをブラウザ画面に表示します.
通常はHTMLドキュメントが表示されますが、XMLや画像を表示することもできますし、プラグイン/拡張機能でPDFなどのタイプのドキュメントを表示することもできます.
レンダリングエンジンのモーションパス
レンダリングエンジンは、要求されたドキュメントの内容を取得することから開始します.その内容は通信から来ている.

デフォルトでは、操作手順は「分割」>「構築」>「配置」>「塗り」です.

グループ:HTMLドキュメントをグループ化し、コンテンツツリーでタグをDOMノードに変換します.CSSファイルに含まれるスタイル要素も分割します.

バージョン:レンダリングツリーを生成するためにHTMLとCSSを合成します.

レイアウト:レンダーツリーの作成が完了したらレイアウトを開始します.各ノードは画面の正しい位置に表示されます.

塗り:スクリーンにレンダリングツリーを描画します.

レンダリングエンジンは、すべてのHTMLがグループ化されるのを待つことなく、レイアウトとペイントプロセスを開始し、より良いUXを得ることができます.
ネットワークが残りのコンテンツを転送するのを待っている間に、受信したコンテンツの一部を画面に表示します.
[注釈とソース]
https://d2.naver.com/helloworld/59361
https://another-light.tistory.com/42?category=844048