[web]ブラウザ動作プロシージャ

5190 ワード
web テキストリンク
ブラウザコンポーネント
ブラウザを構成する要素は次のとおりです.
  • UI
  • ブラウザエンジン
  • レンダリングエンジン
  • ネットワーク層
  • UIバックエンド
  • リポジトリ
    • 1. UI
    UIは、ユーザが要求したページ以外のすべてのUIである.
    Webブラウザ.
    2.ブラウザエンジン
    UIとレンダリングエンジンの間の仲裁役.
    ユーザーがUIと対話するにつれて、ブラウザエンジンはコマンドを理解し、実行します.
    3.レンダリングエンジン
    レンダリングエンジンは、HTML、CSS、JSをグループ化してページを描画します.
    ブラウザによってエンジンが異なります.
    Chrome、Opera、EdgeはWebkit、Blink/FirfoxはGecko/ExplorerはTrudent/Safariを使用します.
    4.ネットワーク層
    HTTP、HTTPSなどの外部リソースをプロトコルとしてサーバに要求を送信する.
    5.JSインタフェース
    JSの役割を説明して実行します.
    6.UIバックエンド
    オペレーティングシステムインタフェースを実行するUIを処理します.AlertまたはSelectのオペレーティングシステムでの動作は異なる場合があります.
    7.リポジトリ
    ブラウザにデータをローカルに格納するためのレイヤ
    Cookie、ローカルストレージ、セッションストレージ、IndexedDB、およびWeb SQLへのアクセスおよびストレージに使用します.
    レンダリングエンジンのモーションパス

    Webページに接続すると、ネットワークで接続されたWebページのHTMLドキュメントをインポートできます.
    レンダリングエンジンは、上記の手順に従ってHTMLドキュメントを解析します.
    プロセスは大きく4つに分けることができます.
  • ボクシング
  • レンダリングツリー構築
  • レイアウトor
    • をリフレッシュ
  • ペンキ
    • このプロシージャを重要なレンダーパスと呼びます.
    1.ボクシング
    構造化タグコードのプロセス
    これは、コードが最小の単位、例えば<div>Hello</div>で分割されることを意味する.
    ['<','d','i','v','>','H','e','l','l','o','<','/','d','i','v'>]
    このように表すことができます.
    割り当てプロセスは、入力された文字列で指定された構文に基づいて作成されます.
    パサーはいつも2つのことをします.

  • 語彙アナライザ
    資料を有効なコインに分解する.

  • 解読する
    言語構文規則に基づいてドキュメント構造を解析し,フラクタルツリーを生成する.
    • ドキュメント→語彙解析→構文解析→分類ツリー
    順番に動く.
    解析器は語彙解析器から新しいタグを取得し、構文規則が一致しているかどうかを確認します.
    ルールが満たされている場合、タグのノードがパーティションツリーに追加され、解析器はタグの追加を要求します.
    2.変換
    解析器は最終結果ではありません.
    ソースコードをマシンコードに変換するコンパイラは、フラクタルツリーを生成し、マシンコードドキュメントに変換します.
    ドキュメント→語彙解析→構文解析→分類ツリー→フォーマットコピー→マシンコード
    語彙はハングル、英語などの単語を指し、文法規則は語彙間に適用される規則を指す.
    よくある文法エラーは文法規則に違反していることです.
    ブラウザはHTML、CSS、JSを解析できます.
    JSは、エンジンレイヤをレンダリングするのではなく、JS解析器と呼ばれる個別のレイヤです.
    レンダーエンジンモーションパス(Render Engine Motion Passes)
    レンダリングエンジンは、サーバの応答を取得するHTMLドキュメントから開始します.
    レンダリングエンジンは、js以外のHTML、CSSをグループ化します.
    1)HTML文書をスライスしてDOMツリーを構築する
    2)CSSファイルとスタイル要素の分割
    3)DOMツリーと2の成果物を組み合わせてレンダリングツリーを構築する
    4)レンダリングツリー内の各ノードの画面上の配置位置を決定する
    5)UIバックエンドでレンダーツリーのノードを描画する
    1.Domツリーの構築
    <html>
    <body>
        <p>Hello World</p>
        <div><img src="example.png" /></div>
    </body>
</html>

    上部に対応するdomツリー.
    2.CSSOMを作成します.
    CSSルールを含むCSSファイルをスタイルシートオブジェクトに分割します.CSSルールオブジェクトには、選択されたオブジェクト、宣言されたオブジェクト、およびCSS構文に一致する他のオブジェクトが含まれます.
    3.ランダーツリー(DOM+CSSOM)

    DOMツリーを構築するとき、ブラウザはDOMツリーに基づいてレンダリングツリーを生成します.[レンダリングツリー](Render Tree)の機能は、ドキュメントをビジュアルコンポーネントにすることです.
    このコンポーネントはレンダラー、レンダーオブジェクトと呼ばれ、レンダラーは自分とそのサブエレメントの配置と描画方法を知っています.
    レンダラーはDOM要素に一致しますが、1:1ではありません.なぜなら、<HEAD>やdisplay:noneなどのユーザが見えないDOM要素は、レンダリングツリーに追加されないからです.(非表示のプロパティがツリーに表示されます.)
    4.レンダーツリーを配置します.
    [レンダリングツリー](Render Tree)は、位置とサイズがないため、各オブジェクトの位置とサイズを決定します.
    5.レンダリングツリーを描画します.
    レンダーツリーを作成してレイアウトを設定すると、UIバックエンドはレンダーツリーのオブジェクトをpx値として表します.
    JavaScriptの処理方法
    JavaScriptはJavaScriptエンジンで処理されます.<script>タグに遭遇すると、HTML解析器はDOMの作成を停止し、JavaScriptエンジンに権限を渡します.
    制御権限を取得したjavascriptエンジンは、<script>タグのJSコードまたはsrc属性で定義されたJSファイルをロードおよび配布することによって実行されます.
    JSの実行が完了したら、HTMLファイルを再制御し、DOMの作成を続行します.
    ブラウザはHTML、CSS、JSを同期して処理します.JSコードが完了していないDOMを操作すると、JavaScriptエンジンに制御権限がある場合にエラーが発生します.
    HTMLファイルでは、JSファイルがbodyタグの下部にある理由です.
    分割:HTMLタグを使用してツリーを作成します(レンダリング?)
    ノード:ドキュメントノード、要素ノード、ツリーを構成する要素
    汎関数プログラミング(24)−汎関数データ型−Monad,monadic programming
    Node.Js com TypeScript プロジェクトの作成と構成