[インターネット]ブラウザの動作原理(2)-パーティション化とDOMツリーの構築

6992 ワード
エクスプローラ ネットワーク テキストリンク

1.グループ化一般


1.ボクシングとは?

  • パケット:文書パケットは、ブラウザがコードを理解可能かつ利用可能な構造に変換することを意味する
    • .
  • 配布結果:
    • ノードツリー、配布ツリー(解析ツリー)、または構文ツリー(構文ツリー)で、通常はドキュメント構造を表します.
  • 例:2+3-1などの式は次のツリーになります.

    • 2.解析器-語彙解析器の組み合わせ


    翻訳は語彙分析と文法分析に分けられる.

    1.語彙分析と文法分析

  • 語彙分析:資料を1つのタグ(有効単位の集合を用語集とし、ex-辞書に現れるすべての単語)に分解するプロセス
    • .
  • 構文解析:言語構文規則を適用するプロセス

    • 2.パーサーの仕事

  • 語彙解析器(=トークン変換器):データを有効なトークンに分解し、スペースや改行などの無意味な文字を除去する
  • 解析器:次の手順を繰り返し、言語構文規則に基づいてドキュメント構造を解析して、フラクタルツリーを生成します.
    構文規則に一致するように、語彙解析器から新しいタグが受信されました.
    1.ルールに準拠している場合:ルールに準拠している場合は、タグのノードがパーティションツリーに追加され、解析器が別のタグを要求します.
    2.ルールが満たされていない場合:解析器はタグを内部に保存し、タグに一致するルールが発見されるまで要求処理とします.適切なルールがない場合は例外処理とします.これは、ドキュメントが無効で構文エラーが含まれていることを意味します.

    • へんかん


    フラクタル・ツリーは最終的な成果物ではなく、後でより多くの変換プロセスが必要です.
    例:コンパイル・プロシージャ-ソース・コードをマシン・コードに変換するコンパイラは、フラクタル・ツリーの作成後にマシン・コード・ドキュメントに変換します.

    3.ネギの種類

  • トップダウン解析器:構文の親構造からマッチング部
    • を検索する
  • 上向き解析器:構文のサブ構造から一致部分を検索
    ここでは,下向き解析器と上向き解析器についてより詳細に議論することはない.読みたい方は出典の記事を参考にしてください.

    • 2.HTML解析器


    HTML解析器とは?

  • HTML解析器:HTMLタグを分類ツリー
    • に変換する.
  • 構文定義:語彙と構文はW 3 Cで詳細として定義され、現在はHTML 5
  • フレキシブル構文:HTMLはデフォルトでタグを省略し、たまに開始または終了タグを省略することができます(XMLとは異なります)
    したがって,HTMLはグループ化が難しく,従来の構文解析ができないため,コンテキストフリー構文ではない.XML解析器もパーティション
    • を行うのは難しい

    2. DOM(Document Object Model)

  • ドキュメントオブジェクトモデル:ドキュメントオブジェクトモデルの略
  • フラクタルツリーはDOMの要素と属性ノードのツリーであり、出力ツリーは
    • である.
  • は、外部のHTML要素(JavaScriptなど)への接続点
    • を指すHTML文書のオブジェクト表現である.
  • ツリーの最上位オブジェクトは、ドキュメント
    • です.
  • DOMと寸法の関係は1:1
    例
    <html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>
    これらのコードは、次のDOMツリーに変換できます.

    • 3.グループ化アルゴリズム


    1.上下に掘ってはいけない


    HTMLは通常のトップダウンまたはアッププロセッサに分けられません
  • 言語の広い属性
    • ブラウザはよく知られているHTMLエラーに対する慣用
  • の変更により、再パーティション化(通常、ソースはパーティション化中は変更されませんが、HTMLにdocument.writeが含まれているスクリプトタグはタグを追加できるため、実際には入力中にファイルが変更されます)
    • .

    2.HTML解析器



    1.トークン化：語彙分析として、入力値をトークンに分ける


    タグを識別してツリージェネレータに渡し、入力が終了するまで次の文字を確認して、追加のタグを確認します.
    (HTMLでは、開始タグ、終了タグ、属性名、属性値としてマークされています)
    タグアルゴリズムタグアルゴリズム:ステートマシン
    -各ステータスに1つまたは複数の連続する文字が入力され、その文字に基づいて次のステータスが更新されますが、結果は現在のタグステータスとツリー構築ステータスの影響を受けます.これは、同じ文字を取得しても、現在の状態に応じて異なる次の状態結果が生成されることを意味します.
    -例
    <html>
  <body>
     Hello world
  </body>
</html>
    初期状態「生産資源ステータス」
    <文字に遭遇した場合、ステータスが「ラベルオープン状態」になります.
    aからzまでの文字に遭遇すると、「タグタグタグタグの開始」(生成されたタグ=htmlタグ)が作成され、ステータスが「タグ名ステータス」(遭遇>文字まで)に変更されます.
    >到着文字、現在のタグが発行され、ステータスが「リソースステータス」
    /文字生成終了タグタグタグタグタグタグタグタグタグタグ

    2.ツリー構築アルゴリズム

  • 解析器が生成されると、
    • ドキュメントオブジェクトが生成されます.
  • ツリーの構築中に、ドキュメントの上部にDOMツリーが変更され、要素
    • が追加されました.
  • トークンによって開始する各ノードは、ツリー作成者によって
    • を処理する.
  • DOMツリーに要素を追加しない場合、開いている要素はスタック(一時バッファストレージ)に追加され、スタックは不正なネストおよび終了していないタグ
    • を修正します.
  • アルゴリズムはステートマシン
    • である.
  • 状態が挿入モード
    • である.
    例
    <html>
  <body>
     Hello world
  </body>
</html>
    入力値タグフェーズで作成された一連のタグ.
    「html」タグ:「html前」モード、タグこのモードで処理し、HTML HtmlElement要素を生成して文書オブジェクトの上部に追加し、ステータスを「head前」モードに変更
    bodyタグ:「head」タグがなくてもHTML HeadElementは暗黙的に作成されてツリーに追加され、bodyタグは処理され、HTML BodyElementは作成されてツリーに追加され、ステータスは「body inner」モード
    「Hellow world」文字列の文字タグ:最初のタグを作成し、「本文」ノードを追加し、他の文字をノードに追加します.
    html終了フラグ:「body後」モード
    前のファイルタグ:パーティションを終了

    3.ドリブル終了後の動作

  • ブラウザとドキュメントのインタラクション
  • 「遅延」モードのスクリプトの分割を開始します.これらのスクリプトは、ドキュメントの分割後に実行する必要があります.
  • 文書ステータスが「完了」
  • 「ロード」イベント
    • ソース
    1. ブラウザはどのように動作しますか?
    TIL 023 | git rebase
    [TIL] EDA