パーティションとDOMツリーの構築

5155 ワード
テキストリンク

⁉⁉⁉⁉⁉⁉⁉⁉⁉?????\82


通常のparsing


  • ドキュメントの分割は、ブラウザがコードを理解可能で使用可能な構造に変換することを意味します.割り当て結果は、通常、ドキュメント構造を表すノードツリーであり、割り当てツリー(parse tree)または構文ツリー(syntax tree)と呼ばれます.
    예) 2+3-1과 같은 표현식은 다음과 같은 트리가 된다!

    • 構文

  • 分詞は、ドキュメント内の言語またはフォーマットのルールに従い、分詞可能なフォーマットは、所定の用語および文法ルールに従う必要があります.これを文脈自由文法といいます.人間の言語はこれとは異なり、機械的に翻訳することはできない.

    • 解析→語彙解析の組合せ

  • 分詞は語彙分析と文法分析の2種類に分けられる.
  • 語彙分析は、資料をタグに分解する過程である.コインは有効に単位を構成する集合体であり、用語集とも呼ばれ、人間の言語では辞書に登場するすべての単語に相当する.
    構文解析は言語の構文規則を適用するプロセスである.

    • パシーの2つの行為

  • 資料を有効タグに分解する語彙分析器
  • スペースや改行のような意味のない文字を消します.
  • 言語構文規則に従って,ドキュメント構造を解析することによってフラクタルツリーの解析器を生成する.

    • 割り当てプロセスは繰り返し、解析器は通常、構文規則と一致するかどうかを確認するために語彙解析器から新しいタグを取得します.ルールに合致する場合、タグのノードがパーティションツリーに追加され、解析器は別のタグを要求します.
    ルールに合致しない場合、解析器はトークンに一致するルールが発見されるまでトークンを内部に保存するように要求します.正しいルールがない場合は例外として処理します.これは、ドキュメントが不要であり、構文エラーが含まれていることを意味します.

    へんかん

  • 坂、木は最高の結果ではありません.たとえば、ソースコードをマシンコードに変換するコンパイラは、フラクタルツリーを作成した後にマシンコードドキュメントに変換します.

    • 法書の種類

  • トップダウン解析器:構文の親構造からマッチング部
    • を検索する
  • 上向き解析器:構文のサブ構造から一致部分を検索
    詳細については、出典を参照してください.

    • デジタルHTML解析器

  • HTMLタグをPartingツリーに変換します.
  • HTMLの語彙と文法はW 3 Cによって詳細として定義されている.(HTML5)
  • フレキシブル構文:HTMLはデフォルトでタグを省略したり、たまに開始タグや終了タグなどを省略したりすることができます.(XMLとの違い)
    したがって,HTMLはグループ化が難しく,従来の構文解析ができないため,コンテキストフリー構文ではない.XML解析器も容易に配布できません.

    • ⭐DOM

  • 文書オブジェクトモデルの略は文書オブジェクトモデルである.
  • クラスタリングツリーはDOM要素と属性ノードのツリーとして出力ツリーとなる.
  • HTMLドキュメントのオブジェクト表示は、外部のJSなどのHTML要素への接続点です.
  • ツリーの最上位オブジェクトはドキュメントです.
  • DOMと寸法は1:1の関係を確立します!
    • <html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>
    次のDOMツリーに変換できます.
  • ツリーはDOMノードを含み、これはDOMコンタクトポイントの1つを実行する要素を構成することを意味する.ブラウザは内部の他のプロパティを使用して具体的に実行します!

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


    HTMLの場合、一般的な上向き/下向き解析器ではグループ化できません.
    1.言語の寛容性
    2.ブラウザによるHTMLエラーへの寛容
    3.変更に従って再グループ化します(通常、ソースはグループ化中は変更されませんが、HTMLにdocument.writeが含まれているスクリプトタグはタグを追加することができますので、実際には入力中にグループを変更します).

    以上の3つの理由から、HTMLパケットに個別の解析器を作成します。

  • ブラウザはHTMLを受信し、語彙と文法を分析してグループ化し、グループツリーを生成します!
  • フラクタルツリーに基づいて、DOM要素と属性ノードを有するDOMツリーが生成される.
    • CSSでは
  • DOMの生成プロセスを繰り返し、CSSオブジェクトモデルを生成する.
  • DOMツリーを構築する間、ブラウザはDOMツリーに基づいてレンダリングツリーを生成します.
  • レンダーツリーには位置とサイズがないため、オブジェクトの位置とサイズが決定され、レンダーツリーの各ノードを画面に描画すると、画面にコンテンツが表示されます.
    • 1.HTMLドキュメントをDOMツリーに分割します.
    2.レンダリングエンジンはcss/styleデータをグループ化し、そのスタイルデータでレンダリングツリーを作成します.

    3.レンダーツリーレイアウトの作成
    各ノードに、画面のどの空間に値を割り当てるかを指定します.
    4.レンダーツリーのカラーリング
    レンダーツリーが作成され、レイアウトが構成されている場合、UIバックエンドは、指定したスタイルと位置の値に従って各ノードを画面上に配置する操作を行います.
    ブラウザがドキュメントをDOM構造に分割して画面に表示するブラウザの動作原理を簡単に理解しました.
    基本中の基本なので、もっと詳しく理解して身につけるので、引き続き見るべきです.😂(難しい)
    ソース(詳細はこちら)
    https://flash-ctf.tistory.com/36
    https://d2.naver.com/helloworld/59361
    https://woong-jae.com/web/210821-how-does-browser-work
    シーケンス化の例
    Covarience And ContraVariance