さぎょうげんり

ブラウザのキー機能

Webリソースを提供するために、サーバ要求に対する応答をブラウザウィンドウに出力します.
リソースフォーマットはHTMLが一般的ですが、PDF、画像など様々なフォーマットがあります.
リソースの場所は、ユーザがURI(Uniform Resource Identifier)を使用して指定します.
URI(Uniform Resource Identifier):インターネット上のリソースの一意のアドレスを表します.
URL(Uniform Resource Locator):ネットワーク上のリソースがどこにあるかを示すための約束.
一般的なユーザーインタフェース要素は次のとおりです.
入力

URIのアドレスバー

前ボタンと次ボタン

ブックマーク

更新および停止ボタン

は、現在のドキュメントを更新してロードを停止する

ホームボタン等

ブラウザコンポーネント

ユーザーインタフェース:
を選択します.要求されたページが表示されるウィンドウを除いて、残りのすべての部分.

ブラウザエンジン:
ユーザインタフェースとレンダリングエンジンとの間の動作(クエリー転送)を制御するインタフェース.

レンダリングエンジン:
要求された内容を画面に出力する役割を果たす.

ネットワーク:
HTTPリクエストなどのネットワーク呼び出しに使用します.これはプラットフォームとは独立したインタフェースであり、各プラットフォームの下部で動作します.

UIバックエンド:
コンボボックスやウィンドウなどの基本コンポーネントの描画に使用します.
オペレーティングシステムのユーザーインタフェースアーキテクチャを使用します.これは、プラットフォームで明確に説明されていない汎用インタフェースです.

javascript interpriter:
JavaScriptコードの解析と実行に使用します.

データストア:
資料を貯蔵する階層です.ブラウザは、クッキーなどのすべてのタイプのデータをハードディスクに格納する必要があります.HTML 5リストには、ブラウザがサポートする「Webデータベース」が定義されています.

レンダーパス(Render Passes)

以下に示すように、レンダリングプロセスを簡単に書きます.

1. 브라우저는 html, css, js, 이미지, 폰트, 여러 등등 
렌더링에 필요한 리소스 파일을 서버에 요청 & 응답

2. 브라우저 렌더링 엔진은 html과 css를 각각 파싱하여 
DOM 과 CSSOM 을 생성 후 결합하여 렌더 트리 생성

3. 브라우저 자바스크립트 엔진은 자바스크립트 파일을 파싱하여 AST(추상 구문 트리)생성하고
이를 바이트코드로 변환하여 실행. 
이때 자바스크립트는 DOM API를 통해 DOM 이나 CSSDOM을 변경할 수 있다. 
변경된 DOM 또는 CSSDOM은 다시 렌더 트리로 결합된다.

4. 렌더 트리 기반 html요소의 레이아웃을 계산.

5. 4번의 결과를 브라우저 화면에 요소를 그린다.

HTMLパケットとDOMの生成

サーバがブラウザ要求に応答するhtmlドキュメントはバイト文字列です.したがって、ブラウザは理解可能なデータ構造に変換する必要があります.
ブラウザレンダリングエンジンはhtmlドキュメントをグループ化することで、ブラウザが理解できるデータ構造DOMを生成する.
DOMはhtmlドキュメントの構造や情報だけでなく、html要素やスタイルも変更できます.
DOM APIを提供します.すなわち、生成されたDOMは、jsファイルにおいて操作可能である.

サーバから受信したhtmlファイルはバイト文字列であり、他のデータ構造に変換する必要がある.
上の図に示すように、バイトコードは、metaタスクのcharset属性で指定された符号化方式で変換される文字列に変換される.
変換された文字列は、再びタグ単位で分割されます.これらのタグはオブジェクトに変換され、各ノードが生成されます.これら生成したノードはDOMを構成する基本要素となる.
コインは文法的な意味を持つ最小単位です.
htmlドキュメントがhtml要素(要素)で構成されている場合、html要素は重複関係を有します.
すなわち、html要素のコンテンツ領域(開始タグと終了タグの間)は、テキストタグだけではない.
他のhtml要素も含めることができます.このときhtml要素間はオーバーラップ関係によって親子関係を形成する.
これらのhtml要素間の親子関係を反映し、すべてのノードをツリー構造にします.
これらのノードからなるデータ構造をDOMと呼ぶ.

cssパケットとcssom生成

レンダリングエンジンはhtmlを行ごとにグループ化してDOMを生成します.
DOMの生成中にcssがロードされたリンクラベルまたはスタイルラベルに遭遇した場合、DOMの作成を一時停止します.
次に、linkタグのhrefで指定されたcssファイルリクエストサーバがロードしたcssファイルまたはstyleタグのcssをパケット化し(バイト->文字->タグ->ノード->CSSOM)、解析してCSSOMを生成します.
その後、css配布が完了すると、html配布を停止した場所からhtmlの再配布が開始され、DOMが生成される.

ツリーの作成

レンダリングエンジンは、受信したhtmlとcssに応答してサーバをグループ化し、DOMとCSSOMをそれぞれ生成する.
この2つをレンダーツリーに結合します.
レンダリングツリーは、ブラウザ画面でレンダリングされたノードのみからなるレンダリング用のツリー構造のデータ構造です.
次に完了したレンダリングツリーは、html要素ごとのレイアウト(位置とサイズ)を計算し、ブラウザ画面でピクセルをレンダリングするペイント処理に入力します.

レンダーパスは繰り返し可能で、繰り返しのたびにレイアウト計算(再生)と塗りつぶし(再生)が再実行されます.

JavaScriptパーティションと実行

レンダリングエンジンはhtmlを順番にグループ化しdomを生成し、jsファイルをロードするscriptラベルやjsコードを内容とするscriptラベルに遭遇するとdomの生成を一時停止します.
次に、スクリプトタスクのsrcツリービューで定義されたファイル要求サーバをロードしたjsファイルまたはスクリプトタグのjsコードをグループ化するためにjsエンジンに制御権を渡します.
その後、jsパケットと実行が終了すると、レンダリングエンジンを再使用して制御権を移行し、残りのhtmlパケットが残ります.
jsパーティションは、ブラウザのレンダリングエンジンではなくJavaScriptエンジンによって処理されます.
jsエンジンはjsコードをグループ化し、それを低レベル言語(cpu理解言語=機械言語)に変換して実行する.
jsエンジンはjsを解析することによってAST(抽象構文ツリー)を生成する.そしてASTに基づいて中間コードバイトコードを生成してinterpreterを実行する.
JavaScriptパーティションと実行:
jsコード--(トークン年齢)-->トークン--(パケット)-->AST-(バイト生成)-->バイトコード

下塗りと下塗り

jsコードがDOM APIを使用する場合、またはCSSDOMを変更します.
変更したdomとcssomは、レンダリングツリーに再結合されます.
変更されたレンダーツリーに基づいて、レイアウトとペイントプロセスを経て、画面に再レンダリングします.
これはリバウンドと呼ばれ、リバウンドと呼ばれます.
「再生」とは、レイアウトを再計算することです.
塗りとは、再結合されたレンダリングツリーに基づいて塗り直すことです.

整理する

ブラウザはレンダリングエンジンを使用してhtmlとcssをhtml解析器とcss解析器を介して
DOMとCSSOMをそれぞれ生成します.
生成されたDOMとCSSOMは、生成されたレンダーツリーに基づいてレンダーツリーにマージされます.
各ノードのレイアウト(レイアウトとサイズの計算)と塗り(画面に出力)の手順.
最終レンダリング
html解析器を生成するDOMはDOM APIを提供する.
DOM APIを使用して、JSで生成されたDOMに対してアクションを実行できます.
DOMが操作され、要素の配置とサイズが変更されると、変更されたDOMとCSSOMが反映されます.
レンダーツリーを再作成し、それに基づいてレイアウト操作を再実行します.
これをreplowと呼びます.
再生を実行すると、変更したレイアウトを反映した図面が再描画されます.
これを落書きといいます.
html解析器は行ごとにhtmlパーティションを行い、cssまたはjsに関連するタグに遭遇した場合
htmlデータマイニングを停止し、cssに遭遇し、cssデータマイニングに遭遇した場合、jsエンジンに
実行権限を超えてhtmlパケットを停止します.
jsエンジンは、jsコードをグループ化するプロセス(js->token->AST->バイト)により、最終的に企業が理解できるバイトコードを生成する.
実行権限を取得したcss解析器またはjsエンジンは、このタスクを完了すると、html解析器に実行権限を再度付与し、html解析器はパケットの再開始を行います.
reference
モダンjavascript deep dive