ブラウザの動作原理
6801 ワード
ブラウザのキー機能
リソースの種類はHTML、CSS、JS、PDF、Imageなどがあります.
ブラウザのユーザーインタフェースは似ています。通常は次のようなものがあります。
アドレスバー
HTML 5リストでは、アドレスバーやステータスバーなどの一般的な要素のほか、ブラウザの必須UIは定義されていませんが、長年にわたって、それぞれの利点を模倣し合うとともに、現在のブラウザUIも生成されています.
ブラウザの基本構造
ユーザーインタフェース-アドレスバー、前/次のボタン、ブックマークメニューなど.要求されたページが表示されるウィンドウを除いて、残りのすべての部分.
ブラウザエンジン-ユーザーインタフェースとレンダリングエンジンの動作を制御します.(ブラウザ自体で実行されるソフトウェア構成を示すエンジン)
レンダーエンジン-リクエストの内容を表示します.たとえば、HTMLを要求すると、HTMLとCSSのブロックが画面に表示されます.コア
通信:HTTP要求などのネットワーク呼び出しに使用されます.これはプラットフォームとは独立したインタフェースであり、各プラットフォームの下部で動作します.
UIバックエンド:コンボボックスやウィンドウなどの基本デバイスを表示します.オペレーティングシステムのユーザーインタフェースアーキテクチャを使用します.これは、プラットフォームで明確に説明されていない汎用インタフェースです.(
<button>または<input>などのラベルのデフォルトスタイル)JavaScriptインタプリタ:JavaScriptコードを解釈および実行します.
リポジトリ-このセクションはリポジトリの階層です.Cookieなどのすべてのタイプのリソースをハードディスクに格納する必要があります.HTML 5リストには、ブラウザがサポートする「Webデータベース」が定義されています.
レンダリングエンジンが一番重要だそうです。レンダリングエンジンはどのように動作しますか?
レンダーエンジン(Render Engine)
レンダリングエンジンは、要求されたリソースをブラウザ画面に表示します.
代表的な2つはWebkit(Chrome,Safari)とGecko(Fire Fox)です.
レンダーエンジンモーションパス(Render Engine Motion Passes)
レンダーエンジン(Render Engine)
レンダリングエンジンは、要求されたリソースをブラウザ画面に表示します.
代表的な2つはWebkit(Chrome,Safari)とGecko(Fire Fox)です.
レンダーエンジンモーションパス(Render Engine Motion Passes)
構築
Webパケット提示動作プロセス
グリコレンダーアクションプロシージャ
両者の違いは、ガイ科エンジンにはコンテンツ処理と呼ばれるプロセスがあり、WebパケットにはHTMLとCSSを個別に要求するプロセスがあり、ガイ科はHTMLを要求し、パケット化した後にCSSとパケット統合を呼び出す.
いずれにせよ、似たような仕事だという.
1.HTML分割後にDOM TREEを構築する
DOMツリーを構築するには、まずスライスを行う必要があります.これは、ブラウザがコードを理解可能な構造に変換するプロセスを意味し、分割結果は通常、ドキュメント構造を表すノードツリーであり、分割ツリーまたは構文ツリーと呼ばれます.
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
💡 CSSパーティション
💡 ではjsファイルは?
JavaScriptは、レンダリングエンジンではなくJavaScriptエンジンによって処理されます.スクリプトタグに遭遇すると、HTML解析器はDOM生成プロセスを停止してJavaScriptコードを実行し、JavaScriptエンジンに制御権限を渡します.制御権限を付与されたJavaScriptエンジンは、スクリプトタグ内のJavaScriptコードまたはスクリプトタグのsrcツリービューで定義されたJavaScriptファイルをロードおよび配布することによって実行されます.JavaScriptの実行が完了すると、再度HTML解析器に制御権限を渡し、ブラウザ停止時からDOMの再作成を開始します.
これにより、ブラウザはHTML、CSS、Javascriptを同期的に処理します.これは、scriptタグの位置によっては、ブロックが発生し、DOMの作成が遅延する可能性があることを意味する.したがってscriptタグの位置は重要な意義を持つ.
body要素の一番下にJavaScriptを置くのは良いアイデアです.その理由は以下の通り.
2.レンダリングツリーの構築
DOM Treeビルド中、ブラウザはレンダリングツリーをビルドします.DOMツリーがWeb上に表示するコンテンツを設定している場合、レンダリングツリーは、表示要素と表示スタイルを指定します.
(Fire Foxはこのコンポーネントをジオメトリ(フレーム)と呼び、Webスイートをレンダラー(レンダラー)またはレンダラーオブジェクト(レンダラーオブジェクト)と呼びます.)
レンダラーとDOMは1:1の対応関係ではありません.
これらの要素は、例えばHTMLの
<head></head>タグCSSのdisplay:[none]タグとScriptタグmetaタグのように除外されます.つまり、[レンダリングツリー](Render Tree)には、ページをレンダリングするために必要なノードだけが含まれます.次に、表示された各ノードに対して一致するCSSOMルールを検索して適用し、ノードをコンテンツと計算スタイルとともにエクスポートします.
3.レンダーツリーを配置する
レンダーツリーを作成した後、Webページに配置し始めます.これをリフロー(Reflow)と呼びます.ブラウザの座標0,0から、各領域に対応するViewportの面積で配置します.このプロセスでは、一部の地域で変更が発生した場合、グローバルな導入とインクリメンタルな導入が発生します.
グローバルレイアウト(Global Layout):レンダリング全体に影響を与えるグローバルスタイルを変更すると発生します.
ポイントレイヤの配置(Point Layer Placement):汚れたレンダラーを配置するときに非同期的に励起されます.
ダーティレンダラー:ブラウザが特別な変更要素を指定していることを示します.変更するのは、ブラウザのみです.
ブラウザでは、レンダーツリーを使用して画面に表示されるグラフィックとテキストの描画を開始し、レンダラーのペイント方法を呼び出しながらUI Backend要素を使用して描画します.
各要素は、次のようにブロックレンダラーの順に描画されます.
4.レンダーツリーのカラーリング
レンダーツリーが作成され、レイアウトが構成されている場合、UI Beck Endは、指定したスタイルと位置値に従って各ノードを画面上に配置します.
より良いユーザー体験を得るためには、レンダリングエンジンはできるだけ早く各コンテンツを画面に配置する必要があります.
したがって、すべてのHTML要素がレンダリングエンジンとして一度に印刷されるわけではありません.まず、ツリー構造で画面に表示され、Web上の他の要素がネットワークを介して順次レンダリングエンジンに入ります.
ブラウザが変更されると、[再フロー](Reflow)と[再ペイント](Repain)が実行されます.塗り直しには、変更したスタイルを再適用する機能があり、サイズや位置も変更された場合は、再描画も実行されます.
複数のブログを振り返るときは、できるだけ理解したことと理解したことをできるだけ詳しく書きます.
Reference
この問題について(ブラウザの動作原理), 我々は、より多くの情報をここで見つけました https://velog.io/@ypyp66/브라우저의-작동-원리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol